All Components

Components / DropDowns / ComboBox

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">
    ComboBox value: {{ comboboxValue }}
    <br />
    <br />
    <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' }
            ]
        }
    }
})

Functionality and Features

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