All Components

Templates

The AutoComplete provides full control over the way an item or a popup header is rendered by using the Kendo UI templates.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'"
                      :server-filtering="true"
                      :page-size="80">
    </kendo-datasource>
    <kendo-autocomplete :data-source-ref="'datasource'"
                        :data-text-field="'ShipName'"
                        :template="itemTemplate"
                        style="width:400px;">
    </kendo-autocomplete>
</div>
Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
    data: {
        itemTemplate: '<strong>#= OrderID #</strong> - #= ShipName #, #= ShipCountry #'
    }
})
In this article