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

Kendo UI DropDowns wrapper for React

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

# Data Binding

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

To provide suggestions, bind the ComboBox 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 ComboBox 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 ComboBox suggestions locally, bind the component to a local data array by using the `dataSource` property.

```jsx-preview
class ComboBoxContainer 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">
                   <ComboBox dataSource={this.dataSource}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ComboBoxContainer data={["Item 1","Item 2", "Item 3"]}/>,
    document.querySelector('my-app')
);
```

## Binding to Remote Data Services

To initialize the ComboBox 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 ComboBox to a remote data service through the Data Source component by using oData.

```jsx
class ComboBoxContainer 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">
                   <ComboBox dataSource={this.dataSource}
                                dataTextField={"ShipName"}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ComboBoxContainer/>,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI Data Source Component](http://docs.telerik.com/kendo-ui/framework/datasource/overview)
* [Kendo UI ComboBox for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/combobox/overview)
* [API Reference of the ComboBox Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)