Default Item

The DropDownList enables you to configure its default item.

The defaultItem property type has to match the data type. For example, if the data property contains a list of objects, the defaultItem has to be defined as an object with the same textField as the data items.

The following example demonstrates how to define a defaultItem as a primitive value.

<div id="vueapp" class="vue-app">
    <div>
        <dropdownlist 
            :data-items='sports'
            :default-item="'Select sport ...'"
        >
        </dropdownlist>
    </div>
</div>
import { DropDownList } from '@progress/kendo-vue-dropdowns';
Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            sports: [ 'Basketball', 'Football', 'Tennis', 'Volleyball' ],
        };
    }
});

The following example demonstrates how to define a defaultItem as an object value.

<div id="vueapp" class="vue-app">
    <dropdownlist
        :data-items="sports"
        :text-field="'text'"
        :default-item="defaultItem"
    >
    </dropdownlist>
</div>
import Vue from 'vue';
import { DropDownList } from '@progress/kendo-vue-dropdowns';

Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            sports: [
                { text: 'Basketball', id: 1 },
                { text: 'Football', id: 2 },
                { text: 'Tennis', id: 3 },
                { text: 'Volleyball', id: 4 }
            ],
            defaultItem: { 
                text: 'Select sport ...'
            }
        };
    },

});

In this article