All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

DropDownList Overview

The DropDownList provides a list of predefined options and allows for a single item selection from that list.

The DropDownList wrapper for React is a client-side wrapper for the Kendo UI DropDownList widget.

To apply a keyboard input, use the Kendo UI ComboBox.

Basic Usage

The following example demonstrates the DropDownList in action.

class DropDownListContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            data: props.data
        })
        this.placeholder = "Enter a fruit..."
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <DropDownList
                        dataSource={this.dataSource}
                        placeholder={this.placeholder}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <DropDownListContainer data={["Apples","Oranges"]}/>,
    document.querySelector('my-app')
);

Features and Functionalities

Events

The following example demonstrates basic DropDownList events. You can subscribe to all DropDownList events by the handler name.

class DropDownListContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            data: props.data
        })
        this.filterType = "contains";
        this.onChange = this.onChange.bind(this);
        this.onOpen = this.onOpen.bind(this);
        this.onFilter = this.onFilter.bind(this);
        this.onClose = this.onClose.bind(this);
        this.onSelect = this.onSelect.bind(this);
        this.onDataBound = this.onDataBound.bind(this);
    }

    onChange = (e) => {
         console.log("event :: change");
    }

    onOpen = (e) => {
        console.log("event :: open");
    }

    onClose = (e) => {
        console.log("event :: close");
    }

    onSelect= (e) => {
        var dataItem = e.dataItem;
        console.log("event :: select (" + dataItem + ")" );
    }

    onDataBound = (e) => {
        console.log("event :: dataBound");
    }

    onFilter = (e) => {
        console.log("event :: filter");
    };

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <DropDownList
                        change={this.onChange}
                        open={this.onOpen}
                        filter={this.filterType}
                        filtering={this.onFilter}
                        close={this.onClose}
                        select={this.onSelect}
                        dataBound={this.onDataBound}
                        dataSource={this.dataSource}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <DropDownListContainer data={["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"]}/>,
    document.querySelector('my-app')
);
In this article