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 built-in binding directives—Allows you to implement data operations with less code.
• Manual binding by using the data property—Provides more control when implementing data operations.

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.

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

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

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

Binding to Hierarchical Data

To bind the TreeList to local hierarchical data:

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

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

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

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.

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.

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

Binding to Hierarchical Data

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

Suggested Links

• Built-in FlatBindingDirective
• Built-in HierarchyBindingDirective
• API Reference of the TreeListComponent
• API Index of the TreeList
• Binding to Remote Data