All Components

Data Binding

The MultiColumnComboBox enables you to bind it to a list of possible values.

To provide suggestions, bind the MultiColumnComboBox to either:

Locally defined values are best for small, fixed sets of suggestions. For larger datasets, use remote suggestions.

Binding to Local Data Arrays

The MultiColumnComboBox enables you to bind to a list of possible values.

To configure and provide the MultiColumnComboBox suggestions locally, bind it to a local data array by using the :data-source prop.

<div id="vueapp" class="vue-app">
    <kendo-multicolumncombobox :data-text-field="'text'"
                               :data-value-field="'value'"
                               :data-source="dataSourceArray"
                               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: 'Cotton', value: '1' },
                { text: 'Polyester', value: '2' },
                { text: 'Cotton/Polyester', value: '3' },
                { text: 'Rib Knit', value: '4' }
            ]
        }
    }
})

Binding to Remote Data Services

To initialize the MultiColumnComboBox by binding it to a remote data service, use the Data Source component. Remote data binding is appropriate for larger datasets, so that items are loaded on demand when displayed. You can use the DataSource for serving data from a variety of data services such as XML, JSON, and JSONP.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
    </kendo-datasource>
    <kendo-multicolumncombobox :data-source-ref="'datasource'"
                               :data-text-field="'ProductName'"
                               :data-value-field="'ProductID'"
                               :placeholder="'Select product'"
                               style="width:670px">
        <kendo-multicolumncombobox-column :field="'ProductID'"
                                          :title="'ID'"
                                          :width="70">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'ProductName'"
                                          :title="'Product Name'">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'QuantityPerUnit'"
                                          :title="'Quantity per Unit'"
                                          :width="150">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'UnitPrice'"
                                          :title="'Unit Price'"
                                          :format="'{0:c}'"
                                          :width="100">
        </kendo-multicolumncombobox-column>
        <kendo-multicolumncombobox-column :field="'UnitsInStock'"
                                          :title="'Units in Stock'"
                                          :width="120">
        </kendo-multicolumncombobox-column>
    </kendo-multicolumncombobox>
</div>
Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp"
})
In this article