# Data Binding

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

## Basics

The DropDownTree exposes the following core data-binding options:

* [`data`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#data) (`any[]`)—Binds the items which will be rendered in a tree-like structure inside the DropDownTree.
* [`textField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#textfield) (`string`)—Determines the item field that will be displayed.
* [`valueField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#valuefield) (`string`)—Determines the item field which will be used as an item identifier.
* [`hasChildren`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#haschildren) (`(node: any) => boolean`)—Determines if a given item has children.
* [`fetchChildren`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#fetchchildren) (`(node: any) => Observable<any[]>`)—Supplies the child items based on the provided parent.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdowntree/data_binding/manual_setup/source.txt)

## Built-in Directives

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

The DropDownTree supports the following built-in directives:

* [`kendoDropDownTreeHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreehierarchybindingdirective)—Handles the binding to hierarchical data.
* [`kendoDropDownTreeFlatBinding`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreeflatbindingdirective)—Handles the binding to flat data by mapping the data to a hierarchical structure and by using the configured parent-child relations.

> The built-in data-binding directives work only with the complete data set and do not support lazy-loading for the child items.

## Hierarchy Binding Directive

To utilize the hierarchy binding directive, provide the directive selector with the desired data set and specify a [`childrenField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreehierarchybindingdirective#childrenfield) value which will be used to identify the child item collections.

The following example demonstrates the [`kendoDropDownTreeHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreehierarchybindingdirective) directive in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdowntree/data_binding/hierarchy_binding_directive/source.txt)

## Flat Binding Directive

To utilize the flat binding directive, provide the directive selector with the desired data set. The relations between the items is determined by the specified [`valueField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreeflatbindingdirective#valuefield)
and [`parentIdField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreeflatbindingdirective#parentidfield). The [`valueField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreeflatbindingdirective#valuefield) serves as an item identifier, while the [`parentIdField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreeflatbindingdirective#parentidfield) value has to point to the [`valueField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreeflatbindingdirective#valuefield) of the item's parent. If the [`parentIdField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreeflatbindingdirective#parentidfield) value does not point to any other element, that item will be rendered at root level.

The following example demonstrates the [`kendoDropDownTreeFlatBinding`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreehierarchybindingdirective) directive in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdowntree/data_binding/flat_binding_directive/source.txt)

## Lazy Loading of Items

The following example demonstrates how to fetch the child items on demand, only after they have been expanded.

> The DropDownTree doesn't cache the child items by default. To avoid fetching the items again on subsequent collapse-expand iterations, cache the already loaded items manually.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdowntree/data_binding/remote_binding/source.txt)

## Heterogenous Data

You can also bind the DropDownTree to heterogenous data, that is, to a different [`valueField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#valuefield) and [`textField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#textfield) value at each level.

To configure the component to use different fields for each level that follows, supply the [`valueField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#valuefield) and [`textField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#textfield) properties with arrays of strings. The items will use the field on the corresponding level as their value and text.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdowntree/data_binding/heterogenous_data/source.txt)

## Suggested Links

* [API Reference of the DropDownTree](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent)
* [API Reference of the Hierarchy Binding Directive](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreehierarchybindingdirective)
* [API Reference of the Flat Binding Directive](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreeflatbindingdirective)
* [Value Binding](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/value-binding)