Custom Rendering

The DropDownList provides options for customizing the way it renders its elements.

The DropDownList utilizes custom renderers which enable you to moderate the content of its:

Items

To customize the content of each option list item, use the item-render prop.

The following example demonstrates how to set the item-render prop of the DropDownList and customize the list elements.

<div id="vueapp" class="vue-app">
    <div>
         <p>Type the name of a European country:</p>
        <dropdownlist 
            :data-items="countries"
            :item-render="itemRender"
            :style="{ width: '200px' }"
        ></dropdownlist>
    </div>
</div>

import Vue from 'vue';
import { DropDownList } from '@progress/kendo-vue-dropdowns';
import countries from './app/countries';
Vue.component('dropdownlist', DropDownList);

const itemRender = {
    props: {
        id: String,
        index: Number,
        dataItem: [Object, String, Number],
        textField: String,
        focused: Boolean,
        selected: Boolean,
    },
    template: `<li class="k-item" @click="handleClick">
    <span :style="{ color: '#00F' }">
            {{dataItem}} {{index}}
            </span></li>`,
    methods: {
      handleClick: function(e){
        this.$emit('click', e);
      }
    }
};


new Vue({
    el: '#vueapp',
    data: function () {
        return {
            itemRender: itemRender,
            countries: countries  
        };
    }
});
export default [
    "Albania",
    "Andorra",
    "Armenia",
    "Austria",
    "Azerbaijan",
    "Belarus",
    "Belgium",
    "Bosnia & Herzegovina",
    "Bulgaria",
    "Croatia",
    "Cyprus",
    "Czech Republic",
    "Denmark",
    "Estonia",
    "Finland",
    "France",
    "Georgia",
    "Germany",
    "Greece",
    "Hungary",
    "Iceland",
    "Ireland",
    "Italy",
    "Kosovo",
    "Latvia",
    "Liechtenstein",
    "Lithuania",
    "Luxembourg",
    "Macedonia",
    "Malta",
    "Moldova",
    "Monaco",
    "Montenegro",
    "Netherlands",
    "Norway",
    "Poland",
    "Portugal",
    "Romania",
    "Russia",
    "San Marino",
    "Serbia",
    "Slovakia",
    "Slovenia",
    "Spain",
    "Sweden",
    "Switzerland",
    "Turkey",
    "Ukraine",
    "United Kingdom",
    "Vatican City"
];

Values

To customize the element content that holds the selected text, use the value-render prop.

<div id="vueapp" class="vue-app">
    <div>
         <p>Type the name of a European country:</p>
        <dropdownlist 
            :data-items="countries"
            :default-value="countries[0]"
            :value-render="valueRender"
            :style="{ width: '200px' }"
        ></dropdownlist>
    </div>
</div>
import Vue from 'vue';
import { DropDownList } from '@progress/kendo-vue-dropdowns';
import countries from './app/countries';
Vue.component('dropdownlist', DropDownList);

const valueRender = {
    props: {
        currentValue: String
    },
     template: `<span class="k-input">
                <span :style="{
                    display: 'inline-block',
                    background: '#333',
                    color: '#fff',
                    borderRadius: '50%',
                    width: '18px',
                    height: '18px',
                    textAlign: 'center',
                    overflow: 'hidden'
                }">
                {{currentValue}}
            </span>
            <span>&nbsp;  {{currentValue}}</span>
            </span>`
};


new Vue({
    el: '#vueapp',
    data: function () {
        return {
            valueRender: valueRender,
            countries: countries
        };
    }
});
export default [
    "Albania",
    "Andorra",
    "Armenia",
    "Austria",
    "Azerbaijan",
    "Belarus",
    "Belgium",
    "Bosnia & Herzegovina",
    "Bulgaria",
    "Croatia",
    "Cyprus",
    "Czech Republic",
    "Denmark",
    "Estonia",
    "Finland",
    "France",
    "Georgia",
    "Germany",
    "Greece",
    "Hungary",
    "Iceland",
    "Ireland",
    "Italy",
    "Kosovo",
    "Latvia",
    "Liechtenstein",
    "Lithuania",
    "Luxembourg",
    "Macedonia",
    "Malta",
    "Moldova",
    "Monaco",
    "Montenegro",
    "Netherlands",
    "Norway",
    "Poland",
    "Portugal",
    "Romania",
    "Russia",
    "San Marino",
    "Serbia",
    "Slovakia",
    "Slovenia",
    "Spain",
    "Sweden",
    "Switzerland",
    "Turkey",
    "Ukraine",
    "United Kingdom",
    "Vatican City"
];

Headers and Footers

To set a header or a footer element in the DropDownList items popup, use the header and footer props.

<div id="vueapp" class="vue-app">
    <div>
         <p>Type the name of a European country:</p>
        <dropdownlist 
            :data-items="countries"
            :header="header"
            :footer="footer"
        ></dropdownlist>
    </div>
</div>
import Vue from 'vue';
import { DropDownList } from '@progress/kendo-vue-dropdowns';
import countries from './app/countries';
Vue.component('dropdownlist', DropDownList);

const header = {
    props: {
        currentValue: String
    },
     template: `<span>
                header
            </span>`
};

const footer = {
    props: {
        currentValue: String
    },
     template: `<span>
            footer
        </span>`
};

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            header: header,
            footer: footer,
            countries: countries
        };
    }
});
export default [
    "Albania",
    "Andorra",
    "Armenia",
    "Austria",
    "Azerbaijan",
    "Belarus",
    "Belgium",
    "Bosnia & Herzegovina",
    "Bulgaria",
    "Croatia",
    "Cyprus",
    "Czech Republic",
    "Denmark",
    "Estonia",
    "Finland",
    "France",
    "Georgia",
    "Germany",
    "Greece",
    "Hungary",
    "Iceland",
    "Ireland",
    "Italy",
    "Kosovo",
    "Latvia",
    "Liechtenstein",
    "Lithuania",
    "Luxembourg",
    "Macedonia",
    "Malta",
    "Moldova",
    "Monaco",
    "Montenegro",
    "Netherlands",
    "Norway",
    "Poland",
    "Portugal",
    "Romania",
    "Russia",
    "San Marino",
    "Serbia",
    "Slovakia",
    "Slovenia",
    "Spain",
    "Sweden",
    "Switzerland",
    "Turkey",
    "Ukraine",
    "United Kingdom",
    "Vatican City"
];

No Data

To customize the content of the option list when no data is present, use the list-no-data-render prop.

<div id="vueapp" class="vue-app">
    <div>
         <p>Type the name of a European country:</p>
        <dropdownlist 
            :data-items="[]"
            :list-no-data-render="listNoDataRender"
        ></dropdownlist>
    </div>
</div>
import Vue from 'vue';
import { DropDownList } from '@progress/kendo-vue-dropdowns';

Vue.component('dropdownlist', DropDownList);

const listNoDataRender = {
    template: `<h4 :style="{ fontSize: '1em' }">
            <span class="k-icon k-i-warning" :style="{ fontSize: '2.5em' }" />
            <br /><br />
            no data here
        </h4>`
};


new Vue({
    el: '#vueapp',
    data: function () {
        return {
            listNoDataRender: listNoDataRender
        };
    }
});

In this article