Angular TreeList Data Binding Basics

The 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

Recommended when the items collection is stored or already available on the client-side and doesn't depend on HTTP requests.

OData

Recommended when the items collection is stored on a server using the OData protocol and should be accessed remotely through HTTP requests.

Remote Data

Recommended when the items collection is stored on a server and should be accessed remotely through HTTP requests.

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.

Suggested Links

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