Kendo UI for Vue MultiSelectTree Overview

The Kendo UI for Vue MultiSelectTree is a form component that lets you choose multiple predefined values from a hierarchical list and is a richer version of the <select> element. Supports filtering, custom rendering, keyboard navigation, expand and collapse of the hierarchical data items.

The Kendo UI for Vue MultiSelectTree component is part of the Kendo UI for Vue library of Vue UI components. It is distributed through NPM under the kendo-vue-dropdowns package.

The following example shows how to set up the MultiSelectTree component:

1. Set dataItems, textField and dataItemKey prop.
2. Use the v-model directive or the value and checkField, checkIndeterminateField, subItemsField, and handle onChange event if you use the value property.
3. Set expandField and handle onExpandChange event.
4. Optionally use the getMultiSelectTreeValue utility function for default value changing behavior.

The MultiSelectTree is part of the Kendo UI for Vue Dropdowns component library. The procedures for installing, importing, and using the Dropdowns are identical for all components in the package.

Key Features

• Filtering—You can configure the MultiSelectTree to filter the results locally or on the server.
• Custom rendering—You can allow the MultiSelectTree component to accept custom values.
• Forms support—You can use the Vue MultiSelectTree component with HTML form elements or with the Kendo UI for Vue Form component.
• Keyboard navigation—The MultiSelectTree supports various keyboard shortcuts.
• Accessibility—The MultiSelectTree is accessible for screen readers and supports WAI-ARIA attributes.

Suggested Links

• API Reference of the MultiSelectTree
• Controlled Components in Vue
• Vue MultiSelectTree High-Level Overview