New to Kendo UI for Vue? Start a free 30-day trial

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Values

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Headers and Footers

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

Example
View Source
Edit In Stackblitz  
Change Theme:

No Data

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

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?