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. Image for the cookie policy date

Adding nodes

  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

3 Replies

SP Sowmiya Padmanaban Syncfusion Team December 24, 2019 10:59 AM UTC

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. 
To know more about the TreeView component, refer the below links. 
Please let us know, if you have any concerns. 

PG Pon Geetha A J Syncfusion Team December 26, 2019 04:40 AM UTC

  Can this be done in Javascript/html instead of a ts file? 
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 

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team December 31, 2019 09:02 AM UTC

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. 
Also, to know more about rendering EJ2 TreeView component in JavaScript. Please, check out the following links. 
To know about Syncfusion components, please check the following link. 
Please, let us know if you need any further assistance. 
Shameer Ali Baig S. 

Live Chat Icon For mobile
Up arrow icon