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.
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
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.
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
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