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
close icon

TreeView and dataManager


I trying to create a dynamic populated tree view with check-boxes  here is an example of the structure:

company 1 => 
     comp 1.1
     comp 1.2

department 2 => 
     dep 1.1
     dep 1.2
     dep 2.1
     dep 2.2

Employees 3 => 
     emp 1.1.1
     emp 1.1.2
     emp 1.2.1
     emp 1.2.2
     emp 2.1.1
     emp 2.1.2 and so on ......

The idea is when comp 1 is selected then department and Employee should change the children based on company selected,  like the cascading Drop Down List.

Can you please provide me with a sample on how to populate and change treeview on selection, using RazorPages(not razor syntax) witch will hook into the dataprovider. As we are coding against aspnetcore 3.0 the OData sample is not an option yet because OData support for this version is not stable yet.

I have been looking for a example using the e-data-manager to populate the treeview using querying with url-adaptor but wasn't able to find a suitable one and  i could not find AspnetCore Ej2  Docs on Data-Manager 

3 Replies

KR Keerthana Rajendran Syncfusion Team November 20, 2019 11:58 AM UTC

Hi Alexander, 
Thanks for contacting Syncfusion support. 
In our TreeView component , we have an event NodeChecked to identify the node checked/unchecked successfully. Using this event, you can identify the corresponding node checked/unchecked in TreeView component. If comp 1.1 node is selected, then we need a key or id to map with child items ; so that we can hide or show the node items based on the selection. In TreeView dataSource, we have added ConncetId attribute to identify the child items. After mapped with the result child items, store the result in array. We have provided disableNodes and enableNodes method to disable and enable the node in TreeView. After disable the nodes you can add the custom style for the element to hide from the component.  
We have prepared sample same as your mentioned structure for your convenience. Kindly refer to the below link for the sample. 
We will also include a topic for rendering TreeView using UrlAdaptor in our UG document by Volume 4 release. 
Please let us know, if you need any further assistance on this.  

AC ACM November 26, 2019 11:05 AM UTC

Thanks alot,

Just what i was looking for and like always verry good and fast support.

Only thing i changed was using a connectId array to drill down into the tree structure to disable employees when a certain company is selected or deselected a few tweaks to the javascript and it worked like a charm.


KR Keerthana Rajendran Syncfusion Team November 27, 2019 04:23 AM UTC

Hi Alexander,  
Most welcome. We are glad to hear that the provided solution helped you to achieve your requirement. Please get back to us if you need any further assistance on this. 

Live Chat Icon For mobile
Up arrow icon