@progress/kendo-grid-react-wrapper/docs/data-binding/index.md

Kendo UI Grid wrapper for React

---
title: Basics
page_title: React Grid Wrapper Data Binding - Basics - Kendo UI
description: "Get started with the Grid wrapper for React by Kendo UI which supports data binding to local data arrays or remote data services."
slug: databinding_grid
position: 0
---

# Data Binding Basics

By default, the Kendo UI Grid wrapper for React is set to automatic data binding—once the Grid loads, the DataSource queries data and the data gets loaded to the Grid.

To disable the default behavior, set the `autoBind` option  of the Grid to `false`.

```sh
<Grid autoBind={false} //other configuration />
```

To populate the Grid with data, bind it to either:
* [Local data arrays](#toc-binding-to-local-data-arrays), or
* [Remote data services](#toc-binding-to-remote-data-services).

## Binding to Local Data Arrays

To bind the Grid to local data, set the `dataSource` option of the `kendoGrid` object.

{% meta height:240 %}
```jsx-preview
class GridContainer extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [{ firstName: "John", lastName: "Smith", email: "john.smith@telerik.com" },
                          { firstName: "Jane", lastName: "Smith", email: "jane.smith@telerik.com" },
                          { firstName: "Josh", lastName: "Davis", email: "josh.davis@telerik.com" },
                          { firstName: "Cindy", lastName: "Jones", email: "cindy.jones@telerik.com" }]
        }

        this.dataSource = new kendo.data.DataSource({
            data: this.state.data
        })
    }

    render() {
        return (
            <Grid dataSource={this.dataSource}/>
        );
    }
}

ReactDOM.render(
    <GridContainer />,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Binding to Remote Data Services

To bind the Grid to remote data, specify the `dataSource` option. You can either create the Data Source outside the component or pass the Data Source in the Grid.

If you have multiple components bound to the same dataset, create the Data Source as an object that you can refer to in different widgets. If the Grid is the only item bound to the data, create the Data Source inline.

For more information on data binding, refer to the documentation of the [Kendo UI Grid for jQuery](http://docs.telerik.com/kendo-ui/controls/data-management/grid/data-binding).

```jsx
class GridContainer 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"
            },
            schema: {
                model: {
                    fields: {
                        OrderID: { type: "number" },
                        Freight: { type: "number" },
                        ShipName: { type: "string" },
                        OrderDate: { type: "date" },
                        ShipCity: { type: "string" }
                    }
                }
            },
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        });
    }

    render() {
        return (
            <Grid dataSource={this.dataSource}>
                <GridColumn field="OrderID" title="Order ID" />
                <GridColumn field="OrderDate" title="Order Date" format="{0: yyyy-MM-dd}" />
            </Grid>
        );
    }
}
ReactDOM.render(
    <GridContainer />,
    document.querySelector('my-app')
);
```

## Suggested Links

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