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