tree view item router link

[Manolo Capdevila]

Hi,

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

Thanks

[Silambarasan I]

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.  

 

Sample: https://stackblitz.com/edit/angular-xgshrv?file=default.component.ts 

  

[DataSource] 

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. 

  

Regards, 

Silambarasan 

[Manolo Capdevila]

Hi,

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

debugger;

this.router.navigate(data[0].navigateUrl)

//window.location.rel='nofollow' href = <string>data[0].navigateUrl;

}

[Silambarasan I]

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: 

https://stackblitz.com/edit/angular-e7ee1p-gplzwm?file=app/app.component.ts 

 

 

Could you please check the above sample and get back to us if you need any further assistance? 

 

Regards, 

Silambarasan 

[Manolo Capdevila]

Ok,it works

[Christopher Issac Sunder K]

Hi Manolo, 

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

Please let us know if you need any further assistance. 

Thanks,
Christo