# Custom Rendering

The MultiSelectTree 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/components/dropdowns/api/multiselecttreeprops#item) prop. To customize the tag elements, use the  [`tag`](https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/multiselecttreeprops#tag) prop.

The following example demonstrates how to customize the list and tag elements.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/multiselecttree/custom-rendering/source.txt)

## Header and Footer

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/multiselecttree/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/components/dropdowns/api/multiselecttreeprops#listnodata) prop.

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

## Suggested Links

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