All Components

Templates

The MultiSelect 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-multiselect :data-source="dataSourceArray"
                       :data-text-field="'text'"
                       :data-value-field="'value'"
                       :placeholder="'Select colors...'"
                       :item-template="itemTemplate">
    </kendo-multiselect>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: {
        dataSourceArray: [
            { text: 'Black', value: '1' },
            { text: 'Orange', value: '2' },
            { text: 'Grey', value: '3' }
        ],
        itemTemplate: '<span class="custom">#= value #</span> #= text #'
    }
})
In this article