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

Using TreeView as Navigation with Events

Hi support,
I want to use the tree view component as my navigation element.

What is the best way to do so?
I have attached an event listener to the event "nodeClicked" and want to use the arguments to change the content of the content area to the right.
I can read the arguments but the only property which is useful is "innerText" where I get the caption of the menu entry.
I don't know how I can get the id of the node or other parameters like the "url" which I have added to the structure of the dataSource object of the TreeView.

So there will be extra work to add another structure where I have to match the innerText to my target url.
And I also have to deal with internationalization where the names of the nodes are different form language to language.

Your examples of the outlook like webmal client are to big and complex to understand what the best way is to achieve my goal.


3 Replies

AB Ashokkumar Balasubramanian Syncfusion Team July 31, 2019 09:19 AM UTC

Hi Stephan, 
Greetings from Syncfusion support. 
We have provided the getTreeData method for this scenario in TreeView. You can pass the node id or node element to get the binded tree data in TreeView. Please check the below code block. 
function onNodeClicked(args){ 
      let data:any = treeObj.getTreeData(args.node); 
      let routerLink: string = data[0].url; 
      console.log("URL Link --->" + routerLink); 
      console.log("Node Id--->"+ data[0].id); 
Note: Open the console to view the result. 
Please check the sample and get back to us, if you require any further assistance on this. 
Ashokkumar B. 

SS Stephan Schrade July 31, 2019 07:16 PM UTC

Thank you very much.
This works perfect!


AB Ashokkumar Balasubramanian Syncfusion Team August 1, 2019 07:32 AM UTC

Hi Stephan, 
We are glad to hear that the provided solution worked for you. Please let us know, if you need any further assistance. 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon