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.

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

   Copy Code     {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.

   Copy Code        <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.

   Copy Code    <Field
           name={"UnitsInStock"}
           component={NonNegativeNumericInput}
           label={"In stock"}
           validator={minValueValidator}

4. Handle the onSubmit event of the Form to update the Grid value.

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

Suggested Links

• Data Query Overview
• API Reference of the Grid
• API Reference of the GridToolbar
• API Index of the Grid