Syncfusion EJ2 Javascript ES5 Treeview control refresh issue

Question

Hi,We are using a EJ2 Javascript ES5 treeview control which is getting populated through hierarchical data obtained from a SQL server database query. Whenever we need to add/update/delete any node, we first update our database using stored procedures, if successful, need to refresh the treeview(or atleast a node along with child elements).To accomplish this, we have stored the json(which is being used as datasource to the tree) in a javascript variable which we repopulate everytime whenever database is updated. Now when we try refresh and refreshNode methods to reflect the changes into tree, it does not work.Below is the code sample for the same.

Indhumathy Loganathan · Accepted Answer

Hi Kiruthika, 
 
We have validated your requirement. In TreeView, we have getTreeData method, which will return the updated data source and the TreeView can be refreshed with this updated data source similar to your requirement. If you pass the ID of TreeView node as arguments for this method, then it will return the updated data source of the corresponding node otherwise it will return the entire updated data source of TreeView. We have prepared a sample to demonstrate this solution. Refer to the below code snippet. 
 




function changeDataSource() { 
  // Get instance of TreeView component 
  var treeInstance = ej.base.getComponent( 
    document.querySelector('#tree'), 
    'treeview' 
  ); 
  //Fetches the updated datasource 
  var treeData = treeInstance.getTreeData(); 
  treeInstance.fields = { 
    dataSource: treeData, 
    id: 'id', 
    text: 'name', 
    child: 'subChild' 
  }; 
} 
 
Sample: https://stackblitz.com/edit/iuglw8-rtccvc?file=index.js 
 
Using the above way, you can maintain the state of TreeView nodes such as selection, expansion and checked state of nodes. Please let us know if you need any further assistance. 
 
Regards, Indhumathy L

Indhumathy Loganathan · Answer

Hi Kiruthika, 
 
Greetings from Syncfusion support. 
 
We have validated your reported query in TreeView component. In EJ2 TreeView, we have fields property which will set the data source and other data related information. You can use this property to dynamically change the TreeView component data source based on your requirement. 
 
Refer to the below code snippet. 
 




var treeInstance = ej.base.getComponent(document.querySelector('#tree'),'treeview'); 
treeInstance.fields = { dataSource: hierarchicalData, id: 'id', text: 'name', child:'subChild' }; 
 
Sample: https://stackblitz.com/edit/iuglw8-rtccvc?file=index.js 
 
We also have a KB document for this scenario, you can refer to the below link. 
 
https://www.syncfusion.com/kb/10135/how-to-refresh-the-data-in-ej2-treeview 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L

Kiruthika K · Answer

Hi,

We have already tried the given solution but the problem with this solution is the state persistence. We don't want to change the data source instead just refresh it from database time to time keeping the currently selected node visible along with maintaining the state. Can you please help?

Thanks,

Kiruthika. K

Shradha · Answer

Hi,We followed your steps for making the syncfusion treeview state persistence but it is not working for us. The variable "treeData" does not contains the updated data after adding new node. Therefore, tree is not getting updated. Can you please tell us what are we doing wrong here?

Below is the code sample for the same.

Indhumathy Loganathan · Answer

Hi Shradha, 
 
We have validated your reported query in TreeView component. We can get the newly added node using getTreeData method. We suggest you to check whether you have added the new node properly in the TreeView. For your reference, we have prepared a simple sample to add nodes and get the updated data in a button click. 
 
Please find the sample from below link. 
 
https://stackblitz.com/edit/iuglw8-rtccvc?file=index.js 
 
We would also like to let you know that we have dataSourceChanged event, which triggers when data source is changed after performing some operation like drag and drop, node editing, adding and removing node. You can retrieve the updated data value in this event argument. Check the below code snippet. 
 




function dataSourceChanged(args) { 
  //Return updated data source. 
  console.log(args.data); 
} 
 
Check whether the shared details help you. If not, please share your exact use case with TreeView and complete code snippet to replicate the issue at our end. If possible, replicate the issue in the above shared sample. These details would help us to assist you promptly. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L

Shradha · Answer

Hi,In the sample ' https://stackblitz.com/edit/iuglw8-rtccvc?file=index.js ' you are using addNodes method for adding new nodes in tree. Is it possible to do the same without using addNodes method and also select the newly added node as well? If yes then how?

Also, the data behind the tree may be updated in the database from other sources as well (as it is a multi user application). So, how to periodically refresh the data without sacrificing the tree state at client side.Thanks,Shradha Chauhan

Indhumathy Loganathan · Answer

Hi Shradha, 
 
Thanks for contacting Syncfusion Support. 
 
Query 1: Is it possible to do the same without using addNodes method and also select the newly added node as well? If yes then how? 
 
In TreeView component, we have addNodes method to add nodes to existing TreeView. For your requirement, you can achieve it by directly pushing the node data into the TreeView datasource. Then you need to refresh the TreeView component to re-render the component again and reflect all the property changes. 
 
To select the newly added nodes, we have selectedNodes property where you can set the nodes that are need to be selected. Check the below code snippet for reference. 
 




document.getElementById('btn').addEventListener('click', (e) => { 
  var nodeId = 'tree_' + index; 
  var item = { id: nodeId, name: 'NewItem' + index }; 
  hierarchicalData.push(item); 
  treeObj.refresh(); 
  index++; 
  //To select the newly added node. 
  treeObj.selectedNodes = [nodeId]; 
}); 
 
Query 2: The data behind the tree may be updated in the database from other sources as well (as it is a multi-user application). So, how to periodically refresh the data without sacrificing the tree state at client side. 
 
You can refresh the entire component after adding or removing the nodes even in a multi-user application which will reflect all the changes at TreeView component. For your reference, we have shared the sample in below link. 
 
https://stackblitz.com/edit/iuglw8-katnra?file=index.js 
 
Please check the sample and let us know if you need any further assistance. 
 
Regards, 
Indhumathy L