We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

adding data dynamically to treeview

Thread ID:

Created:

Updated:

Platform:

Replies:

129012 Feb 21,2017 04:15 PM UTC Feb 23,2017 01:00 PM UTC JavaScript 7
loading
Tags: ejTreeView
Christopher Hui
Asked On February 21, 2017 04:15 PM UTC

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
Replied On February 21, 2017 11:56 PM UTC

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
Replied On February 22, 2017 12:48 AM UTC

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

Adrian
Replied On February 22, 2017 12:56 AM UTC

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

dude maybe this will answer our question

Ashokkumar Balasubramanian [Syncfusion]
Replied On February 22, 2017 01:58 PM UTC

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. 
 
 
To know more details about the “Two- way Binding in Treeview component”, please refer the below link. 
 
 
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. 
 
 
 
 
 
For your convenience, we have prepared the simple JavaScript sample to refresh the tree view control with new data source. 
 
   
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
Replied On February 22, 2017 04:57 PM UTC

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
Replied On February 22, 2017 07:12 PM UTC

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 [Syncfusion]
Replied On February 23, 2017 01:00 PM UTC

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. 
 
 
Please let us know whether the provided information is helpful for achieving your requirement.  
 
Regards, 
Ashokkumar B. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;