All Components

Templates

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

Item Templates

The item template manages the way the list ComboBox items are rendered.

<div id="vueapp" class="vue-app">
    <kendo-combobox :data-source="dataSourceArray"
                    :data-text-field="'text'"
                    :data-value-field="'value'"
                    :template="itemTemplate">
    </kendo-combobox>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: {
        dataSourceArray: [
            { text: 'Black', value: '1' },
            { text: 'Orange', value: '2' },
            { text: 'Grey', value: '3' }
        ],
        itemTemplate: '<strong>#= value #</strong> - #= text #'
    }
})

Header Templates

The header template manages the way the popup header of the ComboBox is rendered.

<div id="vueapp">
    <kendo-combobox :data-source="dataSourceArray"
                    :data-text-field="'text'"
                    :data-value-field="'value'"
                    :header-template="headerTemplate">
    </kendo-combobox>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: '#vueapp',
    data: {
        dataSourceArray: [
            { text: 'Black', value: '1' },
            { text: 'Orange', value: '2' },
            { text: 'Grey', value: '3' }
        ],
        headerTemplate: '<strong>Header template</strong>'
    }
})

The footer template manages the way the popup footer of the ComboBox is rendered. The footer is re-rendered on every change of the Data Source. The context of the template is the component itself.

<div id="vueapp">
    <kendo-combobox :data-source="dataSourceArray"
                    :data-text-field="'text'"
                    :data-value-field="'value'"
                    :footer-template="footerTemplate">
    </kendo-combobox>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: '#vueapp',
    data: {
        dataSourceArray: [
            { text: 'Black', value: '1' },
            { text: 'Orange', value: '2' },
            { text: 'Grey', value: '3' }
        ],
        footerTemplate: '<strong>Footer template</strong>'
    }
})

No-Data Templates

The no-data template displays a noDataTemplate template in the popup when the data source is empty.

When the noDataTemplate option is defined, the component always opens the popup element.

<div id="vueapp">
    <kendo-combobox :data-source="dataSourceArray"
                    :data-text-field="'text'"
                    :data-value-field="'value'"
                    :filter="'contains'"
                    :no-data-template="noDataTemplate">
    </kendo-combobox>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: '#vueapp',
    data: {
        dataSourceArray: [
            { text: 'Black', value: '1' },
            { text: 'Orange', value: '2' },
            { text: 'Grey', value: '3' }
        ],
        noDataTemplate: '<strong>No data is present</strong>'
    }
})
In this article