# Custom Rendering

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

## Items and Value element

To customize the content of each option list item, use the [`item`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops#item) prop. 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/dropdowntreeprops#valuerender) prop.

The following example demonstrates how to customize the list elements and the element that holds the selected text.

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

## Header and Footer

To customize the content of the header and footer, use the [`header`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops#header) and [`footer`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdowntreeprops#footer) prop.

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

## No Data

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdowntree/no-data/source.txt)

## Suggested Links

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