External Form

The data of the KendoReact Grid can be edited by using the KendoReact Form component.

import React from "react";
import ReactDOM from "react-dom";
import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";

import products from "./products.json";

import EditForm from './editForm.jsx';

const EditCommandCell = props => {
    return (
        <td>
            <button
                className="k-button k-primary"
                onClick={() => props.enterEdit(props.dataItem)}
            >
                Edit
      </button>
        </td>
    );
};

class App extends React.Component {
    state = {
        openForm: false,
        editItem: {},
        data: [...products]
    }
    enterEdit = item => {
        this.setState({
            openForm: true,
            editItem: item
        });
    }

    handleSubmit = (event) => {
        this.setState({
            data: this.state.data.map(item => {
                if (event.ProductID === item.ProductID) {
                    item = { ...event };
                }
                return item;
            }),
            openForm: false
        });
    }

    handleCancelEdit = () => {
        this.setState({ openForm: false })
    }

    MyEditCommandCell = props => (
        <EditCommandCell {...props} enterEdit={this.enterEdit} />
    );
    render() {
        return (
            <React.Fragment>
                <Grid style={{ height: "400px" }} data={this.state.data}>
                    <Column field="ProductID" title="ID" width="40px" />
                    <Column field="ProductName" title="Name" width="250px" />
                    <Column field="Category.CategoryName" title="CategoryName" />
                    <Column field="UnitPrice" title="Price" />
                    <Column field="UnitsInStock" title="In stock" />
                    <Column cell={this.MyEditCommandCell} />
                </Grid>
                {this.state.openForm && <EditForm cancelEdit={this.handleCancelEdit} onSubmit={this.handleSubmit} item={this.state.editItem} />}
            </React.Fragment>
        );
    }
}

ReactDOM.render(
    <React.Fragment>
        <App/>
        <style>
        {`.k-animation-container {
            z-index: 10003;
        }`}
    </style>
    </React.Fragment>, document.querySelector('my-app')
);

Setup

The following example utilizes the KendoReact Dialog as a modal form for editing the data of the Grid.

  1. When a record is in edit mode, show the container and pass the edited item to the EditForm component.

    {this.state.openForm && <EditForm cancelEdit={this.handleCancelEdit} onSubmit={this.handleSubmit} item={this.state.editItem} />}
  2. Inside EditForm we use the KendoReact Form component and set the edited item as initial values for the Form to populate it.

    <Form
        onSubmit={props.onSubmit}
        initialValues={props.item}
        render={formRenderProps => (
            <FormElement style={{ maxWidth: 650 }}>
                <fieldset className={"k-form-fieldset"}>
                    <div className="mb-3">
                        <Field
                            name={"ProductName"}
                            component={Input}
                            label={"Product Name"}
                        />
                    </div>
                    <div className="mb-3">
                        <Field
                            name={"Category"}
                            component={DropDownList}
                            data={categories}
                            textField={"CategoryName"}
                            label={"Category"}
                        />
                    </div>
                    <div className="mb-3">
                        <Field
                            name={"UnitPrice"}
                            component={NonNegativeNumericInput}
                            label={"Price"}
                            validator={minValueValidator}
                        />
                    </div>
                    <div className="mb-3">
                        <Field
                            name={"UnitsInStock"}
                            component={NonNegativeNumericInput}
                            label={"In stock"}
                            validator={minValueValidator}
                        />
                    </div>
                </fieldset>
                <div className="k-form-buttons">
                    <button
                        type={"submit"}
                        className="k-button k-primary"
                        disabled={!formRenderProps.allowSubmit}
                    >
                        Update
      </button>
                    <button
                        type={"submit"}
                        className="k-button"
                        onClick={props.cancelEdit}
                    >
                        Cancel
      </button>
                </div>
            </FormElement>
        )}
    />
  3. Add validation using the built-it validation functionality of the Form.

    <Field
        name={"UnitsInStock"}
        component={NonNegativeNumericInput}
        label={"In stock"}
        validator={minValueValidator}
  4. Handle the onSubmit event of the Form to update the Grid value.

    <Form onSubmit={props.onSubmit}
    
    handleSubmit = (event) => {
        this.setState({
            data: this.state.data.map(item => {
                if (event.ProductID === item.ProductID) {
                    item = { ...event };
                }
                return item;
            }),
            openForm: false
        });
    }