# 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:

* [Option list items](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/custom-rendering#items)
* [Option list values](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/custom-rendering#values)
* [Header and footer elements](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/custom-rendering#headers-and-footers)
* [Option list when no data is available](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/custom-rendering#no-data)

## Items

To customize the content of each option list item, use the [`item-render`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#itemrender) prop.

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdownlist/item-render/source.txt)

## Values

To customize the element content that holds the selected text, use the [`value-render`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#valuerender) prop.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdownlist/value-render/source.txt)

## Headers and Footers

To set a `header` or a `footer` element in the DropDownList items popup, use the [`header`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#header) and [`footer`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#footer) props.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdownlist/header-footer/source.txt)

## No Data

To customize the content of the option list when no data is present, use the [`list-no-data-render`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops#listnodatarender) prop.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdownlist/nodata-render/source.txt)

## Suggested Links

* [API Reference of the DropDownList](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops)