New to KendoReactStart 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.

  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({});
    };
In this article
SetupSuggested Links
Not finding the help you need?
Contact Support