New to Kendo UI for Vue? Start a free 30-day trial
Custom Rendering
Updated on Oct 30, 2025
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:
- Option list items
- Option list values
- Header and footer elements
- Option list when no data is available
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.
Change Theme
Theme
Loading ...
Values
To customize the element content that holds the selected text, use the value-render prop.
Change Theme
Theme
Loading ...
Headers and Footers
To set a header or a footer element in the DropDownList items popup, use the header and footer props.
Change Theme
Theme
Loading ...
No Data
To customize the content of the option list when no data is present, use the list-no-data-render prop.
Change Theme
Theme
Loading ...