# Binding the Angular TreeList to Local Data

You can bind the [Angular TreeList](https://www.telerik.com/kendo-angular-ui/components/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](https://www.telerik.com/kendo-angular-ui/components/treelist/data-operations) requirements (filtering, sorting, and paging):

* [Using automatic data processing](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/local-data#automatic-data-processing)—Allows you to implement data operations with less code.
* [Manual binding by using the `data` property](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/local-data#manual-data-management)—Provides more control when implementing data operations.

## Automatic Data Processing

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 directives, you can implement filtering, sorting, and paging by simply setting the respective TreeList input properties. The directives will automatically handle the data operations and update the TreeList accordingly.

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

### Binding to Flat Data

To bind the TreeList to local flat data provide the collection to the built-in [`kendoTreeListFlatBinding`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/flatbindingdirective) directive and set the `idField` and `parentIdField` properties 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.

```html
<kendo-treelist
    [kendoTreeListFlatBinding]="data"
    idField="id"
    parentIdField="parentId"
    kendoTreeListExpandable
>
    <kendo-treelist-column [expandable]="true" field="name" title="Name"></kendo-treelist-column>
    <kendo-treelist-column field="status" title="Status"></kendo-treelist-column>
</kendo-treelist>
```

```ts
public data: SupplyChainNode[] = [
    {
        id: 1,
        parentId: null, // root node
        name: "Global Distribution",
        ...
    },
    {
        id: 2,         // unique ID
        parentId: 1,   // parent ID
        name: "EMEA Region",
        ...
    },
    // more data
]
```

The following example demonstrates the `kendoTreeListFlatBinding` directive in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/data-binding/flat/source.txt)

### Binding to Hierarchical Data

To bind the TreeList to local hierarchical data provide the collection to the built-in [`kendoTreeListHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/hierarchybindingdirective) directive and set the `childrenField` property to the field that stores the array of child nodes. To do so, each data item object must contain a unique ID field and a children field that holds an array of child nodes.

```html
<kendo-treelist
    [kendoTreeListHierarchyBinding]="data"
    childrenField="children"
    kendoTreeListExpandable
>
    <kendo-treelist-column [expandable]="true" field="name" title="Name"></kendo-treelist-column>
    <kendo-treelist-column field="role" title="Role"></kendo-treelist-column>
    <kendo-treelist-column field="status" title="Status"></kendo-treelist-column>
</kendo-treelist>
```

```ts
public data: MedicalNode[] = [
    {
        id: 1,
        name: "Metropolitan General Hospital",
        nodeType: "hospital",
        children: [
            {
                id: 2,
                name: "Surgery",
                nodeType: "division",
                children: [...]
            },
            // more items
        ]
    }
]
```

The following example demonstrates the `kendoTreeListHierarchyBinding` directive in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/data-binding/hierarchy/source.txt)

### 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()`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/flatbindingdirective#rebind) method of the `kendoTreeListFlatBinding` or `kendoTreeListHierarchyBinding`.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/data-binding/rebind/source.txt)

## Manual Data Management

The manual binding provides the most straightforward way of binding an array of items to the TreeList. Using this approach gives you full control over the data operations applied to the TreeList. To implement filtering, sorting, and paging, handle the respective TreeList data operation events and process the data manually in their corresponding handlers.

The TreeList does not require the data to be structured in a specific way. Instead, the TreeList takes as input:

* [`data`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#data)—an array of root nodes.
* [`hasChildren`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#haschildren)—a function used to determine if the node is expandable.
* [`fetchChildren`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#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

You can bind the TreeList to local flat data by providing an array of root nodes to the [`data`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#data) property and implementing the [`hasChildren`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#haschildren) and [`fetchChildren`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#fetchchildren) functions. The `hasChildren` function checks if a node is expandable, while the `fetchChildren` function retrieves the child nodes of a particular node.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/data-binding/basics/flat-data/source.txt)

### Binding to Hierarchical Data

You can bind the TreeList to local hierarchical data by providing an array of root nodes to the [`data`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#data) property and implementing the [`hasChildren`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#haschildren) function. The `hasChildren` function checks if a node is expandable.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/data-binding/basics/source.txt)

## Suggested Links

* [Built-in FlatBindingDirective](https://www.telerik.com/kendo-angular-ui/components/treelist/api/flatbindingdirective)
* [Built-in HierarchyBindingDirective](https://www.telerik.com/kendo-angular-ui/components/treelist/api/hierarchybindingdirective)
* [API Reference of the TreeListComponent](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent)
* [API Index of the TreeList](https://www.telerik.com/kendo-angular-ui/components/treelist/api)
* [Binding to Remote Data](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/remote-data)