Data Binding
The TreeView provides core settings for data binding scenarios and enables you to work with various types of data.
Basics
The TreeView exposes the following core data-binding options:
nodes(field)—Renders the collection which will be visualized as a top-most level.textField(field)—Determines the node field that will be displayed.hasChildren(function)—Determines if a given node has children.children(function)—Supplies the child node based on the provided parent.
import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
@Component({
selector: 'my-app',
template: `
<kendo-treeview
kendoTreeViewExpandable <-- Manages the expand-collapse state.
[nodes]="data" <-- The nodes are in the data field of the host component.
textField="text" <-- The text field of the node will be displayed.
[children]="fetchChildren" <-- The fetchChildren function will provide the child nodes.
[hasChildren]="hasChildren" <-- Use the fetchChildren function to check if a node has children.
>
</kendo-treeview>
`
})
export class AppComponent {
public data: any[] = [{
text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
}, {
text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
];
public fetchChildren(node: any): Observable<any[]> {
//Return the items collection of the parent node as children.
return of(node.items);
}
public hasChildren(node: any): boolean {
//Check if the parent node has children.
return node.items && node.items.length > 0;
}
}Hierarchical Data Binding
To render a hierarchical set of data, implement the children and hasChildren functions.
Built-in Directives
The built-in data-binding directives provide specialized implementations of required callbacks and events, simplify data binding, minimize boilerplate code, and support flat or heterogeneous data.
The TreeView supports the following built-in directives:
kendoTreeViewHierarchyBinding—Handles the binding to hierarchical data.kendoTreeViewFlatDataBinding—Handles the binding to flat data by mapping the data to a hierarchical structure and by using the configured parent-child relation.
Types of Data
The TreeView provides options for binding it to:
Local Heterogeneous Data
The following example demonstrates how to use kendoTreeViewHierarchyBinding to bind the TreeView to local data. The childrenField option indicates which field of the parent node contains the children. Setting the textField to an array allows you to have separate field names for each level.
Remote Heterogeneous Data
The following example demonstrates how to fetch remote data and bind the TreeView to it. While the function that is assigned to the hasChildren setting signals if the given parent node has child nodes, the children option fetches and supplies the data for the child nodes.
Flat Data
The following example demonstrates how to use kendoTreeViewFlatDataBinding to bind the TreeView to flat data. By using the idField and parentIdField to configure the relation between parent and child nodes, you can convert flat data to hierarchal structure.
