DropDownList Overview
The DropDownList provides a list of predefined options and allows for a single item selection from that list.
The DropDownList wrapper for Vue is a client-side wrapper for the Kendo UI DropDownList widget.
Basic Usage
The following example demonstrates the DropDownList in action.
<div id="vueapp" class="vue-app">
DropDownList value: {{ dropdownlistValue }}
<br />
<br />
<kendo-dropdownlist v-model="dropdownlistValue"
:data-source="dataSourceArray"
:data-text-field="'text'"
:data-value-field="'value'"
:filter="'contains'">
</kendo-dropdownlist>
</div>Vue.use(DropdownsInstaller);
new Vue({
el: "#vueapp",
data: function() {
return {
dropdownlistValue: "",
dataSourceArray: [
{ text: 'Small', value: '1' },
{ text: 'Medium', value: '2' },
{ text: 'Large', value: '3' },
{ text: 'X-Large', value: '4' },
{ text: '2X-Large', value: '5' }
]
}
}
})Functionality and Features
- Data binding
- Filtering
- Virtualization
- Grouping
- Cascading DropDownLists
- Templates
- Keyboard navigation
- RTL support
Events
The following example demonstrates basic DropDownList events. You can subscribe to all DropDownList events by the handler name.
<div id="vueapp" class="vue-app">
<kendo-dropdownlist :data-source="dataSourceArray"
:data-text-field="'text'"
:data-value-field="'value'"
:filter="'contains'"
:options-label="'Select country'"
@change="onChange"
@close="onClose"
@dataBound="onDataBound"
@filtering="onFiltering"
@open="onOpen"
@select="onSelect"
@cascade="onCascade">
</kendo-dropdownlist>
</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")
}
}
})