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:

Items

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

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

import React from 'react';
import ReactDOM from 'react-dom';

import { DropDownList } 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>Type the name of a European country:</p>
                <DropDownList
                    data={countries}
                    itemRender={this.itemRender}
                    style={{ width: "200px" }}
                />
            </div>
        );
    }
}

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

Values

To customize the element content that holds the selected text, use the valueRender prop.

import React from 'react';
import ReactDOM from 'react-dom';

import { DropDownList } from '@progress/kendo-react-dropdowns';
import countries from './countries';

class AppComponent extends React.Component {
    valueRender = (element, value) => {
        if (!value) {
            return element;
        }

        const children = [
            <span
                key={1}
                style={{
                    display: 'inline-block',
                    background: '#333',
                    color: '#fff',
                    borderRadius: '50%',
                    width: '18px',
                    height: '18px',
                    textAlign: 'center',
                    overflow: 'hidden'
                }}
            >
                {value}
            </span>,
            <span key={2}>&nbsp; {element.props.children}</span>
        ];

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

    render() {
        return (
            <div className="example-wrapper">
                <p>Type the name of a European country:</p>
                <DropDownList
                    data={countries}
                    defaultValue={countries[0]}
                    valueRender={this.valueRender}
                    style={{ width: '210px' }}
                />
            </div>
        );
    }
}

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

Headers and Footers

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

import React from 'react';
import ReactDOM from 'react-dom';

import { DropDownList } from '@progress/kendo-react-dropdowns';
import countries from './countries';

class AppComponent extends React.Component {
    render() {
        return (
            <DropDownList
                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 option list when no data is present, use the listNoDataRender prop.

import React from 'react';
import ReactDOM from 'react-dom';

import { DropDownList } 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 (
            <DropDownList
                data={[]}
                listNoDataRender={this.listNoDataRender}
            />
        );
    }
}

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