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.
View Source
Edit In Stackblitz  
Change Theme:

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.

In this article

Not finding the help you need?