Custom Rendering

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

The MultiSelect utilizes custom renderers which enable you to moderate the content of its:

Items

To customize the content of each suggestion list item, use the itemRender prop.

The following example demonstrates how to set the itemRender prop of the MultiSelect and customize the list elements.

import React from 'react';
import ReactDOM from 'react-dom';
import { MultiSelect } from '@progress/kendo-react-dropdowns';
import countries from './countries';

class AppComponent extends React.Component {
    itemRender = (li, itemProps) => {
        const index = itemProps.index;
        const itemChildren = <span style={{ color: "#00F" }}>{li.props.children} {index}</span>;

        return React.cloneElement(li, li.props, itemChildren);
    }

    render() {
        return (
            <div className="example-wrapper">
                <p>Select European countries:</p>
                <MultiSelect
                    data={countries}
                    itemRender={this.itemRender}
                />
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Tags

To customize the content of each tag, use the tagRender prop.

The following example demonstrates how to set the tagRender prop of the MultiSelect and customize the tags elements.

<style>
  .custom-tag {
      display: inline-block;
      background: #333;
      color: #fff;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      text-align: center;
      margin-right: 3px;
  }
</style>
const sizes = [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ];

class AppComponent extends React.Component {
    state = { value: '' };

    handleChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

    tagRender = (tagData, li) =>
        React.cloneElement(li, li.props,
            [ <span className="custom-tag">{sizes.indexOf(tagData.data[0])}</span>, li.props.children ])

    render() {
        return (
            <div>
                <div>T-shirt sizes:</div>
                <MultiSelect
                    data={sizes}
                    value={this.state.value}
                    onChange={this.handleChange}
                    tagRender={this.tagRender}
                />
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Headers and Footers

To set a header or a footer element in the items popup of the MultiSelect, use the header and footer props.

import React from 'react';
import ReactDOM from 'react-dom';
import { MultiSelect } from '@progress/kendo-react-dropdowns';
import countries from './countries';

class AppComponent extends React.Component {
    render() {
        return (
            <MultiSelect
                data={countries}
                header={<span style={{ marginLeft: '60px' }}>header</span>}
                footer={<span style={{ marginLeft: '60px' }}>footer</span>}
            />
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

No Data

To customize the content of the suggestion list when no data is present, use the listNoDataRender prop.

import React from 'react';
import ReactDOM from 'react-dom';
import { MultiSelect } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    listNoDataRender = (element) => {
        const noData = (
            <h4 style={{ fontSize: '1em' }}>
                <span className="k-icon k-i-warning" style={{ fontSize: '2.5em' }} />
                <br /><br />
                no data here
            </h4>
        );

        return React.cloneElement(element, { ...element.props }, noData);
    }

    render() {
        return (
            <MultiSelect
                data={[]}
                listNoDataRender={this.listNoDataRender}
            />
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);
 /