External Form

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

Example
View Source
Edit In Stackblitz  
Change Theme:

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
            });
        }

In this article

Not finding the help you need?