Using TreeView as Navigation with Events

[Stephan Schrade]

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.

Regards,

Stephan

[Ashokkumar Balasubramanian]

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); 

} 

 

Sample: https://stackblitz.com/edit/9seq2t-oersal?file=index.ts 

 

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. 

 

Regards, 

Ashokkumar B. 

[Stephan Schrade]

Thank you very much.

This works perfect!

Regards,

Stephan

[Ashokkumar Balasubramanian]

Hi Stephan, 

 

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

 

Regards, 

Ashokkumar B.