@progress/kendo-grid-react-wrapper/docs/editing.md

Kendo UI Grid wrapper for React

---
title: Editing
page_title: React Grid Wrapper - Editing - Kendo UI
description: "Get started with the Grid wrapper for React by Kendo UI which allows you to manipulate the way the Grid renders its data."
slug: editing_grid
position: 3
---

# Editing

Editing is a basic functionality of the Kendo UI Grid wrapper for React and allows you to manipulate the way its data is rendered.

To configure the `dataSource` for CRUD (Create, Read, Update, Destroy) data operations, use the built-in CRUD support for the [Kendo UI Data Source](http://docs.telerik.com/kendo-ui/framework/datasource/overview) component:

1. Configure the CRUD operations and the model of the `dataSource` instance.
1. Set the [`editable`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-editable) properties of the Grid and add the data source.

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

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

        this.dataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url:"https://demos.telerik.com/kendo-ui/service/Products",
                    dataType: "jsonp"
                },
                update: {
                    url: "https://demos.telerik.com/kendo-ui/service/Products/Update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "https://demos.telerik.com/kendo-ui/service/Products/Destroy",
                    dataType: "jsonp"
                },
                create: {
                    url: "https://demos.telerik.com/kendo-ui/service/Products/Create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        })
    }

    render() {
        return (
            <Grid dataSource={this.dataSource}
                pageable={true}
                height={550}
                toolbar={["create"]}
                editable={"inline"}>

                <GridColumn field="ProductName" title="Product Name"  />
                <GridColumn field="UnitPrice" title="Unit Price" format="{0:c}" width="120px" />
                <GridColumn field="UnitsInStock" title="Units in Stock" width="120px" />
                <GridColumn field="Discontinued" title="Discontinued" width="120px" />
                <GridColumn command={["edit", "destroy"]} title="&nbsp;" width="200px" />
            </Grid>
        );
    }
}

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


## Suggested Links

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