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

Kendo UI DropDowns wrapper for React

---
title: Overview
page_title: Overview - MultiSelect - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI MultiSelect delivers and use the wrapper in React projects."
slug: overview_multiselect
position: 1
---

# 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](http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect) widget.

## Basic Usage

The following example demonstrates the MultiSelect in action.

```jsx-preview
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

* [Data binding]({% slug databinding_multiselect %})
* [Templates]({% slug templates_multiselect %})
* [Grouping]({% slug grouping_multiselect %})
* [Virtualization]({% slug virtualization_multiselect %})

## Events

The following example demonstrates basic MultiSelect events. You can subscribe to [all MultiSelect events](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#events) by the handler name.

```jsx
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')
);
```

## Suggested Links

* [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)