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
               initialValues={item}
               onSubmit={onSubmit}
               render={renderProps => (
               <Dialog
                   title={`Edit ${item.ProductName}`}
                   onClose={cancelEdit}
                   style={{maxWidth: '650px'}}
               >
                   <FormElement>
                       <FieldWrapper>
                           <Field
                           name={"ProductName"}
                           component={TextBoxField}
                           label={"Product Name"}
                           />
                       </FieldWrapper>
                       <FieldWrapper>
                           <Label editorId={"Category"}>
                               {"Category"}
                           </Label>
                           <div className={'k-form-field-wrap'}>
                               <Field
                                   id={"Category"}
                                   name={"Category"}
                                   component={DropDownList}
                                   data={categories}
                                   textField={"CategoryName"}
                               />
                           </div>
                       </FieldWrapper>
                       <FieldWrapper>
                           <Field
                           name={"UnitPrice"}
                           component={NonNegativeNumericInput}
                           label={"Price"}
                           validator={minValueValidator}
                           />
                       </FieldWrapper>
                       <FieldWrapper>
                           <Field
                           name={"UnitsInStock"}
                           component={NonNegativeNumericInput}
                           label={"In stock"}
                           validator={minValueValidator}
                           />
                       </FieldWrapper>
                   </FormElement>
                   <DialogActionsBar layout='start'>
                       <Button
                           type={"submit"}
                           themeColor={'primary'}
                           disabled={!renderProps.allowSubmit}
                           onClick={renderProps.onSubmit}
                           >
                           Update
                       </Button>
                       <Button
                           themeColor={'base'}
                           onClick={cancelEdit}
                           >
                           Cancel
                       </Button>
                   </DialogActionsBar>
               </Dialog>
               )}
               {...other}
           />

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={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