How to load dynamic content on click in tree node
In the TreeView component, it is possible to navigate to a particular page on clicking the tree node without refreshing the whole application. This can be achieved by using router for page navigation. For this, additional data must be passed in treeview data source and handle the operation to load the corresponding content based on the added data in nodeSelected event. Refer to the following code sample.
Angular
//Treeview Datasource
public hierarchicalData: Object[] = [{
"nodeId": "00",
"nodeText": "About",
"url": "about",
},
{
"nodeId": "01",
"nodeText": "Angular",
"url": "angular",
"nodeChild": [{
"nodeId": "01-01",
"nodeText": "Javascript",
"url”: "javascript",
}]
},
{
"nodeId": "02",
"nodeText": "Products",
"expanded": true,
"url": "products",
"nodeChild": [{
"nodeId": "02-01",
"nodeText": "Services",
"url": "services",
}]
}];
//Loading content in nodeSelected event
public loadRoutingContent(args: NodeSelectEventArgs): void {
let data: any = this.tree.getTreeData(args.node);
let routerLink: string = data[0].url;
this.router.navigate([routerLink]);
}
As mentioned, in the above code block, the additional data “url” is added to the tree nodes in data source. Based on the added data, the corresponding content will be added.
Final output
Sample: https://stackblitz.com/edit/angular-e7ee1p-3cnvwk?file=styles.css
Vue
//Treeview Datasource
var hierarchicalData = [
{
nodeId: "00",
nodeText: "About",
url: "/"
},
{
nodeId: "01",
nodeText: "Angular",
url: "/angular",
nodeChild: [
{
nodeId: "01-01",
nodeText: "Javascript",
url: "/javascript"
}
]
},
{
nodeId: "02",
nodeText: "Products",
expanded: true,
url: "/products",
nodeChild: [
{
nodeId: "02-01",
nodeText: "Services",
url: "/services"
}
]
}
];
//Loading content in nodeSelected event
loadRoutingContent(args) {
var data = this.$refs.tree.getTreeData(args.nodeData.id);
var routerLink = data[0].url;
this.$router.push(routerLink);
}
Similarly, in above code block, the additional data “url” is added to the tree nodes in data source based on which the corresponding content can be loaded.
Final Output
