External Form Editing in KendoReact Data Grid

Premium

Updated on Jun 24, 2026

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

The following example demonstrates how to edit Grid rows using an external KendoReact Form rendered inside a Dialog, where clicking an Edit button opens a modal form pre-populated with the selected row's data.

Change Theme

Theme

Loading ...

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.

   jsx

   {editItem ? <EditForm cancelEdit={handleCancelEdit} onSubmit={handleSubmit} item={editItem} /> : null}

2. Inside EditForm we use the KendoReact Form component and set the edited item as initial values for the Form to populate it.

   jsx

   <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'} className={'k-form-label'}>
                           {'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}
                       icon="save"
                       svgIcon={saveIcon}
                   >
                       Update
                   </Button>
                   <Button onClick={cancelEdit} icon="cancel" svgIcon={cancelIcon}>
                       Cancel
                   </Button>
               </DialogActionsBar>
           </Dialog>
       )}
       {...other}
   />

3. Add validation using the built-it validation functionality of the Form.

   jsx

   <Field
       name={'UnitPrice'}
       component={NonNegativeNumericInput}
       label={'Price'}
       validator={minValueValidator}
   />

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

   jsx

   <Form onSubmit={onSubmit}>
   ...
   const handleSubmit = (newDataItem) => {
       let newItem = true;
       let newData = data.map((item) => {
           if (newDataItem.ProductID === item.ProductID) {
               newItem = false;
               item = { ...newDataItem };
           }
           return item;
       });
       if (newItem) {
           newData.push(newDataItem);
       }
       setData(newData);
       setEdit({});
   };

Suggested Links

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