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

tree view item router link


I want a sidebar, and inside a tree view for routing.

But I don't know how set the router link in each tree view item


5 Replies

SI Silambarasan I Syncfusion Team November 8, 2018 11:18 AM UTC

Hi Manolo, 
Thank you for contacting Syncfusion support. 
We have checked your requirement “To set the router link in each tree view item” at our end and it can be achievable by using ‘getTreeData()’ method in TreeView. Using this method, we can get the original binded node data’s and also, we have provided the option for detect the node which is currently selected. You can use this option to bind the additional information as like router link and based on that, you can navigate the page by using ‘nodeSelected’ event. Please find the below code example.  
public hierarchicalData: Object[] = [{  
    "nodeId": "00",  
    "nodeText": "Overview",  
    "icon": "icon icon-dashboard",  
    "expanded": false,  
    "enabled": true,  
    "selected": false,  
    "navigateUrl": "https://account.teamyell.nl",  
    "tooltip": null,  
    "nodeChild": null  
[Node Selected Event for TreeView] 
public navigateanotherPage(args){  
         let data:any = this.treeview.getTreeData(args.node);  
          window.location.rel='nofollow' href = <string>data[0].navigateUrl;  
In that sample, we have additionally bind the navigateUrl value for TreeView datasource and used that value to navigate to corresponding page. You can use the same logic to provide the router link and achieve your requirement. 
Could you please check the above sample and get back to us if you need further assistance or misunderstood your requirement? The information provided would be great help for us to provide better solution. 

MC Manolo Capdevila November 12, 2018 03:01 PM UTC


I need navigate to other components, but when I click, the entire page is loaded.

for example, I've defined this node:

{ id: '01-02-01', name: 'Listar usuarios', navigateUrl: 'proyecto/users' },

and, in the node select event

public navigateComponent(args){
let data:any = this.treeview.getTreeData(args.node);
//window.location.rel='nofollow' href = <string>data[0].navigateUrl;

SI Silambarasan I Syncfusion Team November 13, 2018 11:56 AM UTC

Hi Manolo, 
Thanks for your update. 
We have provided the solution in our previous update by suspecting that you want to bind & load navigation link on clicking each TreeView nodes. And we would like to let you know that by specifying the ‘navigationUrl’ property in datasource, it will automatically set the hypertext reference attributes for all the tree nodes by default. This is the cause of entire page reloaded. So, we would like to suggest you to refer the below any one of the two solutions to resolve this problem in your end. 
#Solution 1 
By defining the mapping ‘navigationUrl’ field value as empty “” as like in the below code example. 
this.field = { dataSource: this.hierarchicalData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', expanded: 'expanded', selected: 'selected', navigateUrl:"" }; 
#Solution 2 
By specifying the dataSource property name other than ‘navigationUrl’. 
             "nodeId": "00", 
             "nodeText": "About", 
             "url": "about", 
Stackblitz sample: 
Could you please check the above sample and get back to us if you need any further assistance? 

MC Manolo Capdevila November 16, 2018 01:24 PM UTC

Ok,it works

CI Christopher Issac Sunder K Syncfusion Team November 19, 2018 04:14 AM UTC

Hi Manolo, 

We are glad to hear that the provided solution works for you.  

Please let us know if you need any further assistance. 


Live Chat Icon For mobile
Up arrow icon