# Value Binding

The DropDownTree value can either be a [primitive (strings, numbers, or other)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values) or a [complex value (objects)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Objects).

To set the value, apply any of the following approaches:

* Use the [`value`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#value) property. If the value is set through the `value` property, you have to hook up to the [`valueChange`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#valuechange) event and manually update the value of the `value` property.
* Use the [`ngModel`](https://angular.dev/guide/forms) value binding. If the value is set by the `ngModel` value binding, the framework will automatically update the corresponding field from the model after the value of the component changes.
* Use the [`formControlName`](https://angular.dev/api/forms/FormControlName) value binding available in the [Reactive forms](https://angular.dev/guide/forms/reactive-forms). If the value is set by the `formControlName` value binding, the framework will automatically update the corresponding field from the form model after the value of the component changes.

> The DropDownTree does not support the simultaneous usage of the `value` property and the `ngModel` value binding.

When binding the DropDownTree value, the component provides options for:

* [Using primitive values (strings, numbers, or other)](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/value-binding#primitive-values)
* [Using complex values (objects)](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/value-binding#object-values)

## Primitive Values

If the `value` is of a primitive type, the [`valuePrimitive`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#valueprimitive) property needs to be set to `true` and [`dataItem`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#dataitem) must be provided. The `value` property of the `dataItem` will be associated with the [`valueField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#valuefield) and the text to display will be extracted from the [`textField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent#textfield) of the objects.

Primitive data types include:

* `String`
* `Number`
* `Undefined`
* `Null`

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

### Heterogeneous Data Type

Heterogeneous data contains items of different types at different levels of the tree hierarchy. To handle this, supply `string[]` values for the `valueField` and `textField` properties and assign different field names at each tree level.

The following example demonstrates how to bind the DropDownTree to heterogeneous data.

> When `valueField` and `textField` are `string[]`, always specify `valueDepth`. If you do not provide a value for the field, the DropDownTree will look for the first property match from `dataItem` in the `valueField` which may result in an incorrect value match.

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

## Object Values

If the DropDownTree is bound to a dataset of objects, its value will be an object of the same type.

The following example demonstrates how to bind the DropDownTree to a dataset of objects and configure it to use an object value.

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

The following table lists the valid configuration scenarios.

| Data Type                 | Value     | ValuePrimitive | ValueField     | ValueDepth         | DataItem |
| ------------------------- | --------- | -------------- | -------------- | ------------------ | -------- |
| Hierarchical Homogenous   | primitive | `true`         | set            | Not set            | Set      |
| Hierarchical Homogenous   | complex   | Not set        | set            | Not set            | Not set  |
|                           |           |                |                |                    |          |
| Hierarchical Heterogenous | primitive | `true`         | set \[`Array`] | Set                | Set      |
| Hierarchical Heterogenous | primitive | `true`         | set \[`Array`] | Not set (inferred) | Set      |
| Hierarchical Heterogenous | complex   | Not set        | set \[`Array`] | Set                | Not set  |
| Hierarchical Heterogenous | complex   | Not set        | set \[`Array`] | Not set (inferred) | Not set  |
|                           |           |                |                |                    |          |
| Flat                      | primitive | `true`         | set            | Not set            | Set      |
| Flat                      | complex   | Not set        | set            | Not set            | Not set  |

## Suggested Links

* [API Reference of the DropDownTree](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent)
* [Data Binding](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/data-binding)