New to KendoReact? Start a free 30-day trial
External Form
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.
-
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}
-
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} />
-
Add validation using the built-it validation functionality of the Form.
jsx<Field name={'UnitPrice'} component={NonNegativeNumericInput} label={'Price'} validator={minValueValidator} />
-
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({}); };