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.
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
dataItemKeyis 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.
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