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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Using TreeView as Navigation with Events

Thread ID:





146304 Jul 30,2019 02:50 PM UTC Aug 1,2019 07:32 AM UTC JavaScript - EJ 2 3
Tags: TreeView
Stephan Schrade
Asked On July 30, 2019 02:50 PM UTC

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.


Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 

Stephan Schrade
Replied On July 31, 2019 07:16 PM UTC

Thank you very much.
This works perfect!


Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon