Wrapper Components / Dropdowns / AutoComplete

Grouping

Grouping allows you to display data items which are categorized by a specific model field.

For more information on the grouping functionality of the Data Source, refer to the article on the group configuration.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'"
                      :group-field="'Country'">
    </kendo-datasource>
    <kendo-autocomplete :data-source-ref="'datasource'"
                        :data-text-field="'ContactName'"
                        :placeholder="'Choose a contact...'"
                        style="width:300px;">
    </kendo-autocomplete>
</div>
Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp"
})

In this article