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

MultiSelect Overview

The MultiSelect provides a predefined list for multiple item selection.

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

Basic Usage

The following example demonstrates the MultiSelect in action.

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

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

Features and Functionalities

Events

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

class MultiSelectContainer 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">
                   <MultiSelect
                        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(
    <MultiSelectContainer data={["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"]}/>,
    document.querySelector('my-app')
);
In this article