Data Binding Basics
The main function of the Kendo UI for Angular TreeList is to display a tree of data records in a tabular form.
The TreeList does not require the data to be structured in a specific way. Instead, the component takes as input:
data—an array or an observable of root nodes.hasChildren—a function used to determine if the node is expandable.fetchChildren-а function used to retrieve the child nodes of a particular node. Returns an array or an observable.
The following example demonstrates how to use local hierarchical data.
The following example demonstrates how to use local flat data.
Data Binding Directives
The TreeList ships with a set of directives that address common scenarios for binding to data.
The built-in directives take the entire data set as input and process it in-memory. Sorting, filtering and aggregates are handled automatically.
Generally, the data operations of the TreeList rely on emitting events, such as sortChange, filterChange, and others. The events contain information about the manipulations you need to apply on the data collection to which the TreeList is bound. As a result, the TreeList is able to reflect the current filter, sort, and other states. The dataStateChange event combines all these separate events and fires after each of them to allow you to manipulate the data in a single instead of many event handlers.
The binding directives encapsulate the logic for handling the dataStateChange event and the respective data manipulations. Practically, the directives make the component code cleaner, shorter, and more concise because they allow the data-binding logic to be reused.
Binding to Flat Data
The kendoTreeListFlatBinding directive enables you to bind the TreeList to an array containing all nodes. Parent-child relationships are defined by assigning unique ID and a parent ID to each node.
To bind to flat data, pass the array to the directive and set the idField and parentIdField fields.
Binding to Hierarchical Data
The kendoTreeListHierarchyBinding directive enables you to bind the TreeList to objects that store an array of child nodes in a field.
To bind to hierarchical data, pass the array of root nodes to the directive and set the childrenField input.
Updating Data Items
The binding directives cache the source data and updates to 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 on the directive.
