# Value Binding

The MultiSelectTree value can be an array of either [primitive (strings, numbers, or other)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values) or [complex values (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/multiselecttreecomponent#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/multiselecttreecomponent#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 automatically will 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 automatically will update the corresponding field from the form model after the value of the component changes.

> - The MultiSelectTree does not support the simultaneous usage of the `value` property and the `ngModel` value binding.
> - The MultiSelectTree does not support values which contain `\n` new line characters. The regular `input` HTML DOM element which the MultiSelectTree uses internally treats `\n` as a regular whitespace. Therefore, when the component compares the value of the `input` element with the data item that is selected by the user, the two values differ, the value of the `input` element is actually not present in the data of the component, and the MultiSelectTree does not recognize it. To handle such issues, map the incoming data so that it contains regular whitespaces only.

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

* [Using primitive values (string, number, or other)](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/value-binding#primitive-values)
* [Using Heterogeneous Data Type](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/value-binding#heterogeneous-data-type)
* [Using complex values (objects)](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/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/multiselecttreecomponent#valueprimitive) property needs to be set to `true` and [`dataItems`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselecttreecomponent#dataitems) with the selected data objects must be provided. The `value` property of the `dataItems` will be associated with the [`valueField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselecttreecomponent#valuefield) and the text to display will be extracted from the [`textField`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselecttreecomponent#textfield) of the objects.

Primitive data types include:

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

The following example demonstrates primitive value binding.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multiselecttree/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.

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

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

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

## Object Values

If the MultiSelectTree 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 MultiSelectTree to a dataset of objects and configure it to use an object value.

> When the selected item is an object, always specify `valueField`. If you do not a set value for the field, the MultiSelectTree will compare the items by reference, which may complicate debugging. For example, the selected value will not be applied, if it does not reference the exact passed `data` object.

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

## Suggested Links

* [API Reference of the MultiSelectTree](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselecttreecomponent)