Binding the Angular TreeList to Local Data
You can bind the TreeList to a collection of items that is available locally on the client-side and display a tree of data records in a tabular form. Use this approach when the whole collection is already stored in the application and needs to be accessible at any time, without depending on HTTP calls.
To bind the TreeList to local data, choose one of the following approaches based on the specific data operation requirements (filtering, sorting, grouping, and paging):
- Using built-in binding directives—Allows you to implement data operations with less code.
- Manual binding by using the
data
property—Provides more control when implementing data operations.
Using Data Binding Directives
The binding directives for flat and hierarchical data enable you to bind local data and implement complex TreeLists by reducing the repetitive boilerplate code. As a result, the source code is clean and easy to maintain.
With the binding directive you can enable any data operation by setting the corresponding properties of the component.
<kendo-treelist ... [filterable]="true" [sortable]="true">
...
</kendo-treelist>
Binding to Flat Data
To bind the TreeList to local flat data:
-
Provide the collection to the built-in
kendoTreeListFlatBinding
directive.html<kendo-treelist [kendoTreeListFlatBinding]="treelistData" parentIdField="managerId" idField="id" > <kendo-treelist-column field="name"></kendo-treelist-column> <kendo-treelist-column field="title"></kendo-treelist-column> </kendo-treelist>
-
Define the parent-child relationships by setting the
idField
andparentIdField
fields to the unique identifiers of the node and parent node. To do so, each data item object must contain a unique ID and parent ID field.tspublic treelistData: Employee[] = [ { id: 1, managerId: null, name: "Daryl Sweeney", ... }, { id: 2, // unique ID managerId: 1, // parent ID name: "Guy Wooten", ... }, // more data ]
The following example demonstrates the kendoTreeListFlatBinding
directive in action.
Binding to Hierarchical Data
To bind the TreeList to local hierarchical data:
-
Provide the collection to the built-in
kendoTreeListHierarchyBinding
directive.html<kendo-treelist [kendoTreeListHierarchyBinding]="data" childrenField="contents" > <kendo-treelist-column field="name"></kendo-treelist-column> <kendo-treelist-column field="type"></kendo-treelist-column> </kendo-treelist>
-
Set the
childrenField
property to the field that stores the array of child nodes.tspublic treelistData = [ { type: "directory", name: "examples", contents: [ { type: "file", name: "README.md", }, { type: "file", name: "angular.json", }, //more items ] } ]
The following example demonstrates the kendoTreeListHierarchyBinding
directive in action.
Updating Data Items
The binding directives cache the source data and updating individual items will not be reflected. To refresh the TreeList when using the data binding directives, perform one of the following:
- Replace the source data array with a new instance.
- Invoke the
rebind()
method of thekendoTreeListFlatBinding
orkendoTreeListHierarchyBinding
.
The following example demonstrates both approaches in action when using local flat data.
Using Manual Binding
Using this approach allows you to take full control over the data operations applied to the TreeList. To implement filtering, sorting, and paging, you must handle the respective TreeList data operation events and process the data manually in their corresponding handlers. As a result, the TreeList will reflect the changes and update the UI.
The manual binding provides the most straightforward way of binding an array of items to the TreeList. The component does not require the data to be structured in a specific way. Instead, the TreeList takes as input:
data
—an array of root nodes.hasChildren
—a function used to determine if the node is expandable.fetchChildren
—а function used to retrieve the child nodes array of a particular node.
<kendo-treelist
[data]="rootData"
[fetchChildren]="fetchChildren"
[hasChildren]="hasChildren"
>
</kendo-treelist>
Binding to Flat Data
The following example demonstrates how to manually bind the TreeList to local flat data.
Binding to Hierarchical Data
The following example demonstrates how to manually bind the TreeList to local hierarchical data.