All Components

Data Binding

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

To provide suggestions, bind the ComboBox 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 ComboBox enables you to bind to a list of possible values.

To configure and provide the ComboBox suggestions locally, bind it to a local data array by using the Kendo UI Data Source component.

<div id="vueapp" class="vue-app">
    <kendo-combobox :data-source="dataSourceArray"
                    :data-text-field="'text'"
                    :data-value-field="'value'"
                    :placeholder="'Select a country...'">
    </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' }
            ]
        }
    }
})

Binding to Remote Data Services

To initialize the ComboBox 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-combobox :data-source-ref="'datasource'"
                    :data-text-field="'ProductName'"
                    :data-value-field="'ProductID'"
                    :placeholder="'Select product'">
    </kendo-combobox>
</div>
Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);

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