How to load nodes when expanding the parent node?
In the TreeView component, you can load child nodes dynamically when expanding the parent node in Angular. You can achieve this by adding child nodes returned from the requested URL to the parent in the nodeExpanding event. The following code example demonstrates this.
[TS]
public onNodeExpanding(args: NodeExpandEventArgs) {
if ((args.node.querySelectorAll(".e-icons.e-icon-expandable").length > 0) && args.node.querySelectorAll("ul li").length == 0) {
this.currentTarget = args.node;
this.parentID = args.node.getAttribute("data-uid");
this.xmlRequest(args.node, args.node.getAttribute("data-uid"));
}
}
public xmlRequest(currentTarget, parentID) {
var request = new XMLHttpRequest();
request.open('POST', '/api/SampleData?id=' + parentID, true);
var proxy = this.treeview;
var parent = currentTarget;
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
proxy.addNodes(JSON.parse(resp), parent);
} else {
}
};
request.onerror = function () {
};
request.send();
}
[Initially bound data]
List<treeData> data = new List<treeData>();
data.Add(new treeData { id = 1, name = "Local Disk(C:)", hasChild = true });
data.Add(new treeData { id = 2, name = "Local Disk(D:)", hasChild = true });
data.Add(new treeData { id = 3, name = "Local Disk(E:)", hasChild = true });
[Child data to be loaded on expanding operation]
public JsonResult GetChildItems(int id)
{
load.Add(new loadondemand { id = 2, parentId = 1, name = "Folder 1" });
load.Add(new loadondemand { id = 3, parentId = 1, name = "Folder 2" });
load.Add(new loadondemand { id = 4, parentId = 1, name = "Folder 3", hasChild = true });
load.Add(new loadondemand { id = 6, parentId = 4, name = "File 1" });
load.Add(new loadondemand { id = 7, parentId = 4, name = "File 2" });
load.Add(new loadondemand { id = 9, parentId = 2, name = "Folder 4", hasChild = true });
load.Add(new loadondemand { id = 10, parentId = 9, name = "File 4" });
load.Add(new loadondemand { id = 11, parentId = 9, name = "File 5" });
load.Add(new loadondemand { id = 13, parentId = 9, name = "File 6" });
load.Add(new loadondemand { id = 16, parentId = 3, name = "Folder 7"});
load.Add(new loadondemand { id = 17, parentId = 3, name = "File 7" });
load.Add(new loadondemand { id = 18, parentId = 3, name = "File 8" });
load.Add(new loadondemand { id = 19, parentId = 3, name = "File 9" });
var childData = load.Where(t => t.parentId == id);
return Json(childData);
}
In the above code, only the top-level parent nodes have been loaded initially. When expanding the parent node, in the nodeExpanding event, the corresponding child items have been loaded from the URL. The child items returned from the URL are then appended to the parent element using the addNodes method.
You can find the sample for loading nodes with load on-demand when expanding the parent node below,
Sample:
https://www.syncfusion.com/downloads/support/forum/142164/ze/my-app1802302517
Conclusion
I hope you enjoyed learning about how to load nodes when expanding the parent node.
You can refer to our Angular TreeView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our TreeView example to understand how to create and manipulate data in the .NET MVC TreeView.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our ASP.NET MVC TreeView and other .NET MVC controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
