Item Templates

The ListBox provides full control over the way an item is rendered by using the Kendo UI templates.

<div id="vueapp" class="vue-app">
    <kendo-listbox :data-source=dataSourceArray
                   :data-text-field="'name'"
                   :data-value-field="'name'"
                   :template="template"       
                   :toolbar-tools="['moveUp', 'moveDown', 'remove']">
    </<kendo-listbox>
</div>
Vue.use(ListBoxInstaller);

new Vue({
    el: "#vueapp",
    methods: {
        template: function (e) {
            var template = kendo.template('<h5 style="color:#=color#">#=name#</h5>');
            return template(e);
        }
    },
    data: function() {
        return {
            dataSourceArray: [
                { name: "Orange", color: "orange" },
                { name: "Violet", color: "violet" },
                { name: "Green", color: "green" }
            ],

        }
    }
})

In this article