adding data dynamically to treeview

[Christopher Hui]

i am adding nodes dynamically to the data source for the tree view.

how can i refresh the tree so that it refreshes with the new data?

[Christopher Hui]

for more information, i also want nodes to be able to be dynamically removed too. i will pass in a new data source every time the data is changed.

[Adrian]

this thread is exactly my question too but, is it possible to update the data source without redirecting? 

[Adrian]

https://help.syncfusion.com/angular-1/treeview/tree-node

dude maybe this will answer our question

[Ashokkumar Balasubramanian]

Hi Christopher, 

 

We have analyzed your query (“adding data dynamically to treeview”). We may suspect that, you have used our tree view component in angular platform. So you have to enable the e-deepwatch as true to do any interaction(like add,remove,selection,check,expand and etc…) in Treeview then mapped data source will be updated automatically. Please refer the below code snippet. 

 

[HTML] 

 

<div id="twoway" e-deepwatch="true" ej-treeview e-fields="fields" e-fields-datasource="data" e-allowediting="true" e-allowmultiselection="true" e-allowdraganddrop="true" e-showcheckbox="true"></div 

 

 

[SCRIPT] 

 

$scope.data = localData;  

 

$scope.fields = {  

     id: "id", parentId: "pid", text: "name", hasChild: "hasChild",expanded: "expanded", selected: "selected"  

};  

 

var i = 4;  

$scope.addScope = function () {  

    

    var treeobj = $("#twoway").data("ejTreeView");  

     treeobj.addNode({ id: i, name: "New Item " + i }); i++;  

};  

 

$scope.addNode = function () {  

 

     $scope.data.push({ id: i, name: "New Item " + i }); i++;  // add new item in data source 

 

};  

 

$scope.removeScope = function () {  

     var treeobj = $("#twoway").data("ejTreeView");  

     treeobj.removeNode(); //removed the selected node in TreeView  

};  

 

$scope.removeNode = function () {  

     $scope.data.pop(); // removed last item in data source  

 

}; 

 

 

 

For your convenience, we have prepared simple angular sample to showcase your requirement, please check the sample in below playground. 

 

Sample 

 

To know more details about the “Two- way Binding in Treeview component”, please refer the below link. 

 

https://help.syncfusion.com/angular-1/treeview/getting-started#two-way-binding 

 

Either If you are rendering tree view component in JavaScript then please use the below methods and properties to add or remove nodes in tree view and also refresh the tree view with new data source. 

 

addNode: https://help.syncfusion.com/api/js/ejtreeview#methods:addnode 

 

addNodes: https://help.syncfusion.com/api/js/ejtreeview#methods:addnodes 

 

removeNode: https://help.syncfusion.com/api/js/ejtreeview#methods:removenode 

 

fields.dataSource: https://help.syncfusion.com/api/js/ejtreeview#members:fields-datasource 

 

For your convenience, we have prepared the simple JavaScript sample to refresh the tree view control with new data source. 

 

Sample Link. 

   

Please let us know whether the provided information is helpful for achieving your requirement. If not,  

please provide the more information (code snippet, platform) on this requirement and this would be helpful for us to identify the requirement and provide a solution at the earliest. 

 

Regards, 

Ashokkumar B. 

[Christopher Hui]

i am not using angular; i am using react.

i am currently updating the fields.dataSource, then calling the refresh method on the treeView. This is not working. The tree does not refresh with the new nodes

[Christopher Hui]

I took up your suggestion to add nodes by utilizing the addNode method. However I am having an issue.

If there is a selected node, addNode always adds the node as a child of the selected node. I am trying to add a parent node, even when there is a node selected. I tried specifying the target as empty string in hopes it would add the node to the root but that doesn't work. I cannot unselect nodes without allowMultiSelection set to true. I don't want multi selection.

How can I add a root node with a node selected? Otherwise, how can I unselect a node so that I can add a root node? My end goal is to add a root node.

[Ashokkumar Balasubramanian]

Hi Christopher, 

 

Thanks for providing the details. 

 

Query 1: How can I add a root node with a node selected? 

 

You can set the parent Id as “0” to add a root node with a node selected. Please refer the below code. 

 

[Script] 

       //create the object for treeview component 

       var treeviewObj = $("#treeView2").ejTreeView("instance"); 

      //Create the new node   

      var obj = [{ pid: "0", name: "New Root Node" }]; 

     //Add the node to treeview    

     treeviewObj.addNode(obj); 

 

Query 2: i am currently updating the fields.dataSource, then calling the refresh method on the treeView. This is not working. The tree does not refresh with the new nodes 

  

1.       You can use “fields.dataSource” property to change the entire dataSource of treeview component. We don’t need to call “refresh” method. Please refer the below code.  

 

[Scripts] 

 

var dataSource = [ 

                   { id: 7, name: "Sales and Events", hasChild: true, expanded: true }, 

                   { id: 8, pid: 7, name: "100 Albums - $5 Each" }, 

                   { id: 9, pid: 7, name: "Hip-Hop and R&B Sale" }]; 

var treeviewObj = $("#treeView1").ejTreeView("instance"); 

treeviewObj.option("fields.dataSource", dataSource); 

 

2.       ou can use “addNode” method to update the date source for treeview component. Please refer the below code snippet. 

[Scripts] 

 

       var treeviewObj = $("#treeView3").ejTreeView("instance"); 

        var obj = [{ name: "New Node" }];  

        treeviewObj.addNode(obj); 

 

For your convenience we have showcase the above three requirements in below sample, please find the sample in below location. 

 

Sample Location 

 

Please let us know whether the provided information is helpful for achieving your requirement.  

 

Regards, 

Ashokkumar B.