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

Kendo UI DropDowns wrapper for React

---
title: Data Binding
page_title: Data Binding - MultiSelect - Kendo UI Wrappers for React
description: "Bind the Kendo UI MultiSelect wrapper to data in React projects."
slug: databinding_multiselect
position: 2
---

# Data Binding

The MultiSelect enables you to bind it to a list of possible values.

To provide suggestions, bind the MultiSelect to either:
* [Local data arrays](#toc-binding-to-local-data-arrays), or
* [Remote data services](#toc-binding-to-remote-data-services).

Locally defined values are best for small, fixed sets of suggestions. For larger datasets, use remote suggestions. When you use the AutoComplete with the [Kendo UI Data Source component](http://docs.telerik.com/kendo-ui/framework/datasource/overview), you can push the filtering of large remote data services to the server as well, and as a result, the client-side performance maximizes.

## Binding to Local Data Arrays

To configure and provide the MultiSelect suggestions locally, bind the component to a local data array by using the `dataSource` property.

```jsx-preview
class MultiSelectContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            data: props.data
        })
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <MultiSelect dataSource={this.dataSource}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <MultiSelectContainer data={["Item 1","Item 2", "Item 3"]}/>,
    document.querySelector('my-app')
);
```

## Binding to Remote Data Services

To initialize the MultiSelect by binding it to a remote data service, use the [Data Source component](http://docs.telerik.com/kendo-ui/framework/datasource/overview). It is an abstraction for local and remote data. Remote data binding is appropriate for larger datasets, so that items are loaded on demand when displayed. You can use the DataSource for serving data from a variety of data services such as [XML](http://en.wikipedia.org/wiki/XML), [JSON](http://en.wikipedia.org/wiki/JSON), and [JSONP](http://en.wikipedia.org/wiki/JSONP).

The following example demonstrates how to bind the MultiSelect to a remote data service through the Data Source component by using oData.

```jsx
class MultiSelectContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            pageSize: 80
        })
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <MultiSelect dataSource={this.dataSource}
                                dataTextField={"ShipName"}
                                dataValueField={"OrderID"}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <MultiSelectContainer/>,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI Data Source Component](http://docs.telerik.com/kendo-ui/framework/datasource/overview)
* [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)