New to Kendo UI for AngularStart a free 30-day trial

Binding the Angular TreeList to Local Data

You can bind the TreeList to a collection of items that is available locally on the client-side and display a tree of data records in a tabular form. Use this approach when the whole collection is already stored in the application and needs to be accessible at any time, without depending on HTTP calls.

To bind the TreeList to local data, choose one of the following approaches based on the specific data operation requirements (filtering, sorting, grouping, and paging):

Using Data Binding Directives

The binding directives for flat and hierarchical data enable you to bind local data and implement complex TreeLists by reducing the repetitive boilerplate code. As a result, the source code is clean and easy to maintain.

With the binding directive you can enable any data operation by setting the corresponding properties of the component.

html
<kendo-treelist ... [filterable]="true" [sortable]="true">
    ...
</kendo-treelist>

Binding to Flat Data

To bind the TreeList to local flat data:

  1. Provide the collection to the built-in kendoTreeListFlatBinding directive.

    html
    <kendo-treelist
        [kendoTreeListFlatBinding]="treelistData"
        parentIdField="managerId"
        idField="id"
    >
        <kendo-treelist-column field="name"></kendo-treelist-column>
        <kendo-treelist-column field="title"></kendo-treelist-column>
    </kendo-treelist>
  2. Define the parent-child relationships by setting the idField and parentIdField fields to the unique identifiers of the node and parent node. To do so, each data item object must contain a unique ID and parent ID field.

    ts
    public treelistData: Employee[] = [
        {
            id: 1,
            managerId: null,
            name: "Daryl Sweeney",
            ...
        },
        {
            id: 2, // unique ID
            managerId: 1, // parent ID
            name: "Guy Wooten",
            ...
        },
        // more data
    ]

The following example demonstrates the kendoTreeListFlatBinding directive in action.

Change Theme
Theme
Loading ...

Binding to Hierarchical Data

To bind the TreeList to local hierarchical data:

  1. Provide the collection to the built-in kendoTreeListHierarchyBinding directive.

    html
    <kendo-treelist
        [kendoTreeListHierarchyBinding]="data"
        childrenField="contents"
        >
            <kendo-treelist-column field="name"></kendo-treelist-column>
            <kendo-treelist-column field="type"></kendo-treelist-column>
    </kendo-treelist>
  2. Set the childrenField property to the field that stores the array of child nodes.

    ts
    public treelistData = [
        {
            type: "directory",
            name: "examples",
            contents: [
                {
                  type: "file",
                  name: "README.md",
                },
                {
                  type: "file",
                  name: "angular.json",
                }, //more items
            ]
        }
    ]

The following example demonstrates the kendoTreeListHierarchyBinding directive in action.

Change Theme
Theme
Loading ...

Updating Data Items

The binding directives cache the source data and updating individual items will not be reflected. To refresh the TreeList when using the data binding directives, perform one of the following:

  • Replace the source data array with a new instance.
  • Invoke the rebind() method of the kendoTreeListFlatBinding or kendoTreeListHierarchyBinding.

The following example demonstrates both approaches in action when using local flat data.

Change Theme
Theme
Loading ...

Using Manual Binding

Using this approach allows you to take full control over the data operations applied to the TreeList. To implement filtering, sorting, and paging, you must handle the respective TreeList data operation events and process the data manually in their corresponding handlers. As a result, the TreeList will reflect the changes and update the UI.

The manual binding provides the most straightforward way of binding an array of items to the TreeList. The component does not require the data to be structured in a specific way. Instead, the TreeList takes as input:

  • data—an array of root nodes.
  • hasChildren—a function used to determine if the node is expandable.
  • fetchChildren—а function used to retrieve the child nodes array of a particular node.
html
 <kendo-treelist
    [data]="rootData"
    [fetchChildren]="fetchChildren"
    [hasChildren]="hasChildren"
    >
 </kendo-treelist>

Binding to Flat Data

The following example demonstrates how to manually bind the TreeList to local flat data.

Change Theme
Theme
Loading ...

Binding to Hierarchical Data

The following example demonstrates how to manually bind the TreeList to local hierarchical data.

Change Theme
Theme
Loading ...