Load childs on click

[Fahir Cakmak]

Hi,

Is there any solution for loading childs of one node dynamically on click of that node?

Our web api is not support odata.

Best regards...

[Christopher Issac Sunder K]

Hi Fahir, 

Thank you for contacting Syncfusion support. 

We checked your requirement Loading child nodes dynamically on click of node in EJ2 TreeView. You can achieve it by dynamically adding child nodes returned from requested url to the parent. 

We have prepared a sample for your reference. In this sample, the TreeView loads the child node if and only if we expand a node using nodeExpanding event. At the initial load, we have loaded only the top-level parent nodes. While expanding the parent node, in the nodeExpanding event - we can call the URL from where you want to load the child items. The child items which are returned from the URL are then appended to the parent element using the addNodes method. Please refer the following code block. 

[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 binded 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); 

} 

 

Sample: http://www.syncfusion.com/downloads/support/forum/142164/ze/my-app1802302517  

Please check it and let us know if you have any more concerns. 

Thanks,
Christo