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")
}
}
})