# Angular TreeList Data Binding Basics

The [Angular TreeList](https://www.telerik.com/kendo-angular-ui/components/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:

<Row>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/treelist/data-binding/local-data">
      <ComponentTitle>Local Data</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Bind to flat or hierarchical data already available on the client side without HTTP requests.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/treelist/data-binding/odata-binding">
      <ComponentTitle>OData</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Connect to server data using the OData protocol and access it remotely through HTTP requests.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/treelist/data-binding/remote-data">
      <ComponentTitle>Remote Data</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Bind to data stored on a server and access it remotely through HTTP requests.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/treelist/data-binding/live-updating-data">
      <ComponentTitle>Streaming Data</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Display streaming updates in real-time for live data visualization.</ComponentDescription>
    </Component>
  </Column>
</Row>

## 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](https://www.telerik.com/kendo-angular-ui/components/treelist/columns/define-columns) documentation section.

## Known Limitations

* The `kendoTreeListFlatBinding` and `kendoTreeListHierarchyBinding` directives cache the source data. Mutating individual items does not trigger a re-render. To refresh the TreeList, replace the data array with a new instance or call the `rebind()` method on the directive.
* The TreeList requires each data item to supply a unique ID. When using flat data, set the `idField` and `parentIdField` properties. When using hierarchical data, set the `childrenField` property to the array of child nodes.

## Suggested Links

* [Binding the TreeList to Local Data](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/local-data)
* [Binding the TreeList to Remote Data](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/remote-data)
* [Binding the TreeList to OData](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/odata-binding)
* [Binding the TreeList to Streaming Data](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/live-updating-data)
* [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)