# Data Binding

The TreeView provides core settings for data binding scenarios and enables you to work with various types of data.

## Basics

The TreeView exposes the following core data-binding options:

* [`nodes`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodes) (field)—Renders the collection which will be visualized as a top-most level.
* [`textField`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#textfield) (field)—Determines the node field that will be displayed.
* [`hasChildren`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#haschildren) (function)—Determines if a given node has children.
* [`children`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#children) (function)—Supplies the child node based on the provided parent.

The following example demonstrates the core data binding setup using the `nodes`, `textField`, `children`, and `hasChildren` properties to render a hierarchical list.

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

## Hierarchical Data Binding

To render a hierarchical set of data, implement the [`children`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#children) and [`hasChildren`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#haschildren) functions.

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

## Built-in Directives

The built-in data-binding directives provide specialized implementations of required callbacks and events, simplify data binding, minimize boilerplate code, and support flat or heterogeneous data.

The TreeView supports the following built-in directives:

* [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/hierarchybindingdirective)—Handles the binding to hierarchical data.
* [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/flatdatabindingdirective)—Handles the binding to flat data by mapping the data to a hierarchical structure and by using the configured parent-child relation.

## Types of Data

The TreeView provides options for binding it to:

<Row>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#local-heterogeneous-data">
      <ComponentTitle>Local Heterogeneous Data</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Bind to hierarchical data stored locally using kendoTreeViewHierarchyBinding directive.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#remote-heterogeneous-data">
      <ComponentTitle>Remote Heterogeneous Data</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Fetch and bind hierarchical data from remote sources with on-demand loading of child nodes.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#flat-data">
      <ComponentTitle>Flat Data</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Convert flat data to hierarchical structure using kendoTreeViewFlatDataBinding with parent-child relations.</ComponentDescription>
    </Component>
  </Column>
</Row>

### Local Heterogeneous Data

The following example demonstrates how to use `kendoTreeViewHierarchyBinding` to bind the TreeView to local data. The `childrenField` option indicates which field of the parent node contains the children. Setting the `textField` to an array allows you to have separate field names for each level.

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

### Remote Heterogeneous Data

The following example demonstrates how to fetch remote data and bind the TreeView to it. While the function that is assigned to the `hasChildren` setting signals if the given parent node has child nodes, the `children` option fetches and supplies the data for the child nodes.

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

### Flat Data

The following example demonstrates how to use `kendoTreeViewFlatDataBinding` to bind the TreeView to flat data. By using the `idField` and `parentIdField` to configure the relation between parent and child nodes, you can convert flat data to hierarchal structure.

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

## Suggested Links

* [Angular TreeView Homepage](https://www.telerik.com/kendo-angular-ui/treeview)
* [API Reference of the Angular TreeView](https://www.telerik.com/kendo-angular-ui/components/treeview/api)