Adding nodes

[Neil]

Hi

  I am using Javascript/HTML/CSS and wish to start the web site with a blank Treeview, then when receiving data from our server wish to add the nodes. I dont want to bind the data automatically, I plan to receive JSON data (some of the data not for the TreeView) add it into a buffer then display the tree. Is there an example of creating and displaying an empty treeview, then for example by pressing a button the data is added?

Many Thanks

Neil

[Sowmiya Padmanaban]

Hi Neil, 

 

Greetings from Syncfusion support. 

 

We have checked your reported query that dynamically add the data to the TreeView component. To achieve your requirement, initially set the dataSource property as empty for TreeView component and add the dataSource during button click. Refer the below code snippet for dynamically add dataSource. 

 

document.getElementById('add').onclick = () => {  

   treeObj.fields.dataSource = (dataSource as any).defaultData; 

  } 

 

 

We have prepared a sample for your reference. In that sample, we load the dataSource dynamically. Refer the sample link below. 

https://stackblitz.com/edit/yyvq9v?file=index.ts 

 

To know more about the TreeView component, refer the below links. 

 

UG Documentation – https://ej2.syncfusion.com/documentation/treeview/getting-started 

 

Samples Link - https://ej2.syncfusion.com/demos/#/material/treeview/default.html 

 

API Reference - https://ej2.syncfusion.com/documentation/api/treeview/ 

 

Please let us know, if you have any concerns. 

 

 

Regards, 

Sowmiya.P 

[Pon Geetha A J]

 Hi 

  Can this be done in Javascript/html instead of a ts file? 

 

Regards 

Neil 

 ________________________________________________ 

  

Hi 

Many thanks for below. It works great, but what is the .ts file extension? I tried to place it in my javascript file but it mentions it can only be placed in a ts file 

 

Best Regards 

Neil 

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Neil, 

  

Yes, you can use EJ2 TreeView in JavaScript. For your convenience, we have modified the previously provided sample for JavaScript platform. 

  

Please, find the sample from the following link. 

  

Sample: https://stackblitz.com/edit/koi16u-81t61m?file=index.js  

  

Also, to know more about rendering EJ2 TreeView component in JavaScript. Please, check out the following links. 

  

Demos: https://ej2.syncfusion.com/javascript/demos/#/material/treeview/default.html  

  

Documentation: https://ej2.syncfusion.com/javascript/documentation/treeview/es5-getting-started/  

  

To know about Syncfusion components, please check the following link. 

  

https://help.syncfusion.com/  

  

Please, let us know if you need any further assistance. 

  

Regards, 

Shameer Ali Baig S.