# MultiSelectTree Data and Value Binding

The MultiSelectTree enables you to configure its predefined list of options and selected values.

To set the predefined option list, use the [`dataItems`](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#dataitems) property. To set the selected values, use the [`value`](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#value) property or use the [v-model directive](https://vuejs.org/guide/components/v-model.html).

<CtaPanelOverview></CtaPanelOverview>

## Data Binding

To bind the MultiSelectTree component to data, use the [`dataItems`](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#dataitems) property that accepts a dataset of objects.

In addition to the `dataItems`, to make the component fully functional, we need to define the following properties:

* [textField](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#textfield) - Sets the data item field that represents the item text
* [dataItemKey](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#dataitemkey) - Sets the key for comparing the data items of the MultiSelectTree. If `dataItemKey` is not set, the MultiSelectTree compares the items by reference.
* [checkField](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#checkfield) - Specifies the name of the field which will provide a Boolean representation of the checked state of the item.
* [checkIndeterminateField](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#checkindeterminatefield) - Specifies the name of the field which will provide a Boolean representation of the checked indeterminate state of the item.
* [subItemsField](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#subitemsfield) - Specifies the name of the field which will provide an array representation of the item subitems. Defaults to 'items'.
* [expandField](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#expandfield) - Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
* [expandchange](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#onexpandchange) - An event that fires when expanding or collapsing an item.

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

## Value Binding

You can set the value of the MultiSelectTree through the `v-model` directive or by using the [`value`](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#value) property of the component in a combination with the [`change`](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#onchange) event. In this scenario, when the `change` event is triggered you should manually update the value of the `value` property.

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

## Suggested Links

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