All Components

MultiSelect Overview

The MultiSelect provides a predefined list for multiple item selection.

The MultiSelect wrapper for Vue is a client-side wrapper for the Kendo UI MultiSelect widget.

Basic Usage

The following example demonstrates the MultiSelect in action.

<div id="vueapp" class="vue-app">
       <h4>T-shirt size:</h4>
       <kendo-multiselect v-model="multiselectValue"
                          :data-source="dataSourceArray"
                          :data-text-field="'text'"
                          :data-value-field="'value'"
                          :placeholder="'Select size...'"
                          :filter="'contains'">
       </kendo-multiselect>
   </div>
Vue.use(DropdownsInstaller);

   new Vue({
       el: "#vueapp",
       data: function() {
           return {
               multiselectValue: "",
               dataSourceArray: [
                   { text: 'Baseball', value: '1' },
                   { text: 'Basketball', value: '2' },
                   { text: 'Cricket', value: '3' },
                   { text: 'Football', value: '4' },
                   { text: 'Tennis', value: '5' },
                   { text: 'Volleyball', value: '6' }
               ]
           }
       }
   })

Features and Functionalities

Events

The following example demonstrates basic MultiSelect events. You can subscribe to all MultiSelect events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-multiselect :data-source="dataSourceArray"
                       :data-text-field="'text'"
                       :data-value-field="'value'"
                       :filter="'contains'"
                       :placeholder="'Select sports...'"
                        @change="onChange"
                        @close="onClose"
                        @dataBound="onDataBound"
                        @filtering="onFiltering"
                        @open="onOpen"
                        @select="onSelect"
                        @deselect="onDeselect">
    </kendo-multiselect>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                { text: 'Baseball', value: '1' },
                { text: 'Basketball', value: '2' },
                { text: 'Cricket', value: '3' },
                { text: 'Football', value: '4' },
                { text: 'Tennis', value: '5' },
                { text: 'Volleyball', value: '6' }
            ]
        }
    },
    methods: {
        onChange: function(e) {
            console.log("Event :: change");
        },
        onClose: function(e) {
            console.log("Event :: close");
        },
        onDataBound: function(e) {
            console.log("Event :: dataBound");
        },
        onFiltering: function(e) {
            console.log("Event :: filtering");
        },
        onOpen: function(e) {
            console.log("Event :: open");
        },
        onSelect: function(e) {
            console.log("Event :: select");
        },
        onDeselect: function(e) {
            console.log("Event :: deselect")
        }
    }
})
In this article