@progress/kendo-dropdowns-react-wrapper/docs/multiselect/templates.md

Kendo UI DropDowns wrapper for React

---
title: Templates
page_title: Templates - MultiSelect - Kendo UI Wrappers for React
description: "Customize the content of the suggested list items and the drop-down list elements of a Kendo UI MultiSelect wrapper for React."
slug: templates_multiselect
position: 3
---

# Templates

The MultiSelect provides full control over the way an item or a popup header is rendered by using the [Kendo UI templates](http://docs.telerik.com/kendo-ui/framework/templates/overview).

```jsx-preview
class MultiSelectContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            data: props.data
        })
        this.template = "<span>This is #:data# with template</span>"
        this.tagTemplate = "<strong>#:data# is selected</strong>"
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <MultiSelect dataSource={this.dataSource}
                            template={this.template}
                            tagTemplate={this.tagTemplate}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <MultiSelectContainer data={["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"]}/>,
    document.querySelector('my-app')
);
```

The MultiSelect also displays a `noDataTemplate` template in the popup when the data source is empty.

```jsx
class MultiSelectContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            data: props.data
        })
        this.noDataTemplate = "<strong>No Data!</strong>"
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <MultiSelect dataSource={this.dataSource}
                            noDataTemplate={this.noDataTemplate}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <MultiSelectContainer data={[]}/>,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI Templates](http://docs.telerik.com/kendo-ui/framework/templates/overview)
* [Kendo UI MultiSelect for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/multiselect/overview)
* [API Reference of the MultiSelect Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect)