Dialog Editing in KendoReact Data GridPremium
Setup the Built-In Dialog Editing
The KendoReact Data Grid supports external dialog editing, enabling you to edit and manipulate data in outside of the Data Grid component. Its features are as follows:
-
Set the
editableprop of the grid toeditable={{ mode: 'dialog', enabled: true }}. -
Set the
dataItemKeyto indicate the key identifier for editing. -
Configure the
editproperty to manage the built-in edit state. This will notify the Grid when a row is in edit and the external Dialog will pop-up.
const dataItemKey = 'ProductID';
const [edit, setEdit] = React.useState<EditDescriptor>({});
<Grid
edit={edit}
dataItemKey={dataItemKey}
editable={{ mode: 'dialog', enabled: true }}
/>- You can decide the way which the Grid will be notified when a row is in edit mode so that the edit Dialog can show.
const rowClick = (event: GridRowClickEvent) => {
const inEditID = event.dataItem[dataItemKey]
setEdit({ [inEditID]: true});
};
<Grid
edit={edit}
editable={{ mode: 'dialog', enabled: true }}
onRowClick={rowClick}
/>- Finally when the editing is finished, handle the new data and update the data state.
const handleItemChange = (event: GridItemChangeEvent) => {
const inEditID = event.dataItem.ProductID;
const newData = data.map((item) => {
const isRowEdited = item.ProductID === inEditID;
return isRowEdited ? { ...item, ...event.dataItem } : item;
});
setData(newData);
setEdit({});
};
<Grid
edit={edit}
editable={{ mode: 'dialog', enabled: true }}
dataItemKey={dataItemKey}
onRowClick={rowClick}
onItemChange={handleItemChange}
/>Here is an example that showcases how to utilize the external Dialog edit in the KendoReact Grid.
Editing Input Validation
The built-in edit Dialog has a mechanism to validate inputs by utilizing the Grid Column validator prop.
const nameValidator = (value: string) => {
if (value?.length < 3) {
return 'Name must be at least 3 characters long';
}
return '';
};
<Grid>
<GridColumn field="ProductName" validator={nameValidator}/>
<Grid/>The following example showcases how the validation of the edit inputs work.
Custom Edit Dialog
You can also cutomize the edit dialog by passing a custom dialog component to the editDialog property of the Grid.
The following example showcases how to pass a custom form dialog component.