ComboBox Overview
The ComboBox is a richer version of the <select> element and allows the user to choose from a list of options or enter custom values through the keyboard.
The ComboBox wrapper for Vue is a client-side wrapper for the Kendo UI ComboBox widget.
Basic Usage
The following example demonstrates the ComboBox in action.
<div id="vueapp" class="vue-app">
<kendo-combobox v-model="comboboxValue"
:placeholder="'Select sport...'"
:data-source="dataSourceArray"
:data-text-field="'text'"
:data-value-field="'value'"ч
:filter="'contains'">
</kendo-combobox>
</div>Vue.use(DropdownsInstaller);
new Vue({
el: "#vueapp",
data: function() {
return {
comboboxValue: "",
dataSourceArray: [
{ text: 'Albania', value: '1' },
{ text: 'Andorra', value: '2' },
{ text: 'Armenia', value: '3' },
{ text: 'Austria', value: '4' },
{ text: 'Azerbaijan', value: '5' },
{ text: 'Belarus', value: '6' },
{ text: 'Belgium', value: '7' }
]
}
}
})Features and Functionalities
Events
The following example demonstrates basic ComboBox events. You can subscribe to all ComboBox events by the handler name.
<div id="vueapp" class="vue-app">
<kendo-combobox :data-source="dataSourceArray"
:data-text-field="'text'"
:data-value-field="'value'"
:filter="'contains'"
:placeholder="'Select country...'"
@change="onChange"
@close="onClose"
@dataBound="onDataBound"
@filtering="onFiltering"
@open="onOpen"
@select="onSelect"
@cascade="onCascade">
</kendo-combobox>
</div>Vue.use(DropdownsInstaller);
new Vue({
el: "#vueapp",
data: function() {
return {
dataSourceArray: [
{ text: 'Albania', value: '1' },
{ text: 'Andorra', value: '2' },
{ text: 'Armenia', value: '3' },
{ text: 'Austria', value: '4' },
{ text: 'Azerbaijan', value: '5' },
{ text: 'Belarus', value: '6' },
{ text: 'Belgium', value: '7' }
]
}
},
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");
},
onCascade: function(e) {
console.log("Event :: cascade")
}
}
})