All Components

Components / DropDowns / DropDownList

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

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")
        }
    }
})
In this article