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.

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.

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.

Suggested Links

• API Reference of the MultiSelectTree