External Form Editing in KendoReact Data Grid

Premium

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

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

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