Angular TreeList Data Binding Basics

Updated on Jun 8, 2026

The Angular TreeList is a powerful component that requires data-binding to display a tree of data records in a tabular form.

Choosing the right data-binding approach depends on the requirements of your project, the specific scenario, and desired features.

All data-binding mechanisms use the same public API to pass the data to the TreeList.

You can bind the TreeList to:

Local Data

Bind to flat or hierarchical data already available on the client side without HTTP requests.

OData

Connect to server data using the OData protocol and access it remotely through HTTP requests.

Remote Data

Bind to data stored on a server and access it remotely through HTTP requests.

Streaming Data

Display streaming updates in real-time for live data visualization.

Columns Definition

By default, when you bind the TreeList to data, it automatically generates a column for each field in the data set. You can override this behavior and manually define the necessary columns. To achieve this, nest the necessary columns declaratively inside the <kendo-treelist> tag.

The following code snippet demonstrates a basic TreeList with two columns.

html

<kendo-treelist [kendoTreeListFlatBinding]="data" ...>
      <kendo-treelist-column field="name" title="Name"></kendo-treelist-column>
      <kendo-treelist-column field="title" title="Title"></kendo-treelist-column>
</kendo-treelist>

For more details on how to define and configure the TreeList columns, check the Columns Configuration documentation section.

Known Limitations

• The kendoTreeListFlatBinding and kendoTreeListHierarchyBinding directives cache the source data. Mutating individual items does not trigger a re-render. To refresh the TreeList, replace the data array with a new instance or call the rebind() method on the directive.
• The TreeList requires each data item to supply a unique ID. When using flat data, set the idField and parentIdField properties. When using hierarchical data, set the childrenField property to the array of child nodes.

Suggested Links

• Binding the TreeList to Local Data
• Binding the TreeList to Remote Data
• Binding the TreeList to OData
• Binding the TreeList to Streaming Data
• API Reference of the TreeListComponent
• API Index of the TreeList