All Components

MultiColumnComboBox Overview

The MultiColumnComboBox provides a list with a table-like drop-down structure for picking single items or entering custom values.

The MultiColumnComboBox wrapper for Vue is a client-side wrapper for the Kendo UI MultiColumnComboBox widget.

Basic Usage

The following example demonstrates the MultiColumnComboBox in action.

<div id="vueapp" class="vue-app">
    MultiColumnComboBox value: {{ comboboxValue }}
    <br />
    <br />
    <kendo-multicolumncombobox ref="combo"
                               v-model="comboboxValue"
                               :data-text-field="'text'"
                               :data-value-field="'value'"
                               :data-source="dataSourceArray"
                               :filter="'contains'"
                               style="width:200px">
        <kendo-multicolumncombobox-column :field="'text'"></kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'value'" :width="70"></kendo-multicolumncombobox-column>
    </kendo-multicolumncombobox>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            comboboxValue: '',
            dataSourceArray: [
                { text: 'Cotton', value: '1' },
                { text: 'Polyester', value: '2' },
                { text: 'Cotton/Polyester', value: '3' },
                { text: 'Rib Knit', value: '4' }
            ]
        }
    }
})

Functionality and Features

Events

The following example demonstrates basic MultiColumnComboBox events. You can subscribe to all MultiColumnComboBox events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-multicolumncombobox ref="combo"
                               :data-text-field="'text'"
                               :data-value-field="'value'"
                               :data-source="dataSourceArray"
                               @change="onChange"
                               @close="onClose"
                               @dataBound="onDataBound"
                               @filtering="onFiltering"
                               @open="onOpen"
                               @select="onSelect"
                               style="width:200px">
        <kendo-multicolumncombobox-column :field="'text'"></kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'value'" :width="70"></kendo-multicolumncombobox-column>
    </kendo-multicolumncombobox>
</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");
        }
    }
})
In this article