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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

tree view item router link

Thread ID:

Created:

Updated:

Platform:

Replies:

140792 Nov 7,2018 11:26 AM UTC Nov 19,2018 04:14 AM UTC Angular - EJ 2 5
loading
Tags: Treeview
Manolo Capdevila
Asked On November 7, 2018 11:26 AM UTC

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 [Syncfusion]
Replied On 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.  
 
  
[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
Replied On November 12, 2018 03:01 PM UTC

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 [Syncfusion]
Replied On 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? 
 
Regards, 
Silambarasan 


Manolo Capdevila
Replied On November 16, 2018 01:24 PM UTC

Ok,it works

Christopher Issac Sunder K [Syncfusion]
Replied On 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. 

Thanks,
Christo


CONFIRMATION

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.

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

;