External Form
The data of the KendoReact Grid can be edited by using the KendoReact Form component.
Setup
The following example utilizes the KendoReact Dialog as a modal form for editing the data of the Grid.
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} />}
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> )} />
Add validation using the built-it validation functionality of the Form.
<Field name={"UnitsInStock"} component={NonNegativeNumericInput} label={"In stock"} validator={minValueValidator}
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 }); }