Tag Mode

The MultiSelect allows you to render one or more selected items as a single entry.

To apply the desired tag mode, use the single or multiple configurations.

<div id="vueapp" class="vue-app">
    <p>'Single' tag mode</p>
    <kendo-multiselect :data-source="dataSourceArray"
                        :data-text-field="'text'"
                        :data-value-field="'value'"
                        :tag-mode="'single'">
    </kendo-multiselect>
    <br />
    <br />
    <p>'Multiple' tag mode</p>
    <kendo-multiselect :data-source="dataSourceArray"
                        :data-text-field="'text'"
                        :data-value-field="'value'">
    </kendo-multiselect>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            multiselectValue: "",
            dataSourceArray: [
                { text: 'Baseball', value: '1' },
                { text: 'Basketball', value: '2' },
                { text: 'Cricket', value: '3' },
                { text: 'Football', value: '4' },
                { text: 'Tennis', value: '5' },
                { text: 'Volleyball', value: '6' }
            ]
        }
    }
})

In this article