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 property. To set the selected values, use the value property or use the v-model directive.

The MultiSelectTree is part of Kendo UI for Vue, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

Data Binding

To bind the MultiSelectTree component to data, use the 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 - Sets the data item field that represents the item text
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 - Specifies the name of the field which will provide a Boolean representation of the checked state of the item.
checkIndeterminateField - Specifies the name of the field which will provide a Boolean representation of the checked indeterminate state of the item.
subItemsField - Specifies the name of the field which will provide an array representation of the item subitems. Defaults to 'items'.
expandField - Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
expandchange - An event that fires when expanding or collapsing an item.

Change Theme

Theme

Loading ...

Value Binding

You can set the value of the MultiSelectTree through the v-model directive or by using the value property of the component in a combination with the change event. In this scenario, when the change event is triggered you should manually update the value of the value property.