New to KendoReact? Start a free 30-day trial

Inline

The KendoReact Data Grid enables you to create, update, and delete data records inline.

The following example demonstrates how to implement the inline editing.

Change Theme

Theme

Loading ...

Setup

Set the editable prop of the Grid to true and configure its edit property to manage the built-in edit state and track which rows are being edited.
jsx
```
const [edit, setEdit] = React.useState<EditDescriptor>({});
```
jsx
```
<Grid
    edit={edit}
    editable={true}
>
```

Configure the command column by defining the command buttons inside the GridCell component. In the example below, we use a function which receives all functions that will be executed from the command buttons and passes them to the command cell component.

jsx

const CommandCell = (props) => {
    const { edit, remove, add, discard, update, cancel, editField } = props;
    return (
        <MyCommandCell
            {...props}
            edit={edit}
            remove={remove}
            add={add}
            discard={discard}
            update={update}
            cancel={cancel}
            editField={editField}
        />
    );
};

jsx

export const MyCommandCell = (props) => {
    const { dataItem } = props;
    const inEdit = props.isInEdit;
    const isNewItem = dataItem.ProductID === null;
    const [visible, setVisible] = React.useState(false);
    const onDeleteData = () => {
        props.remove(props.dataItem);
        setVisible(!visible);
    };
    const toggleDialog = () => {
        setVisible(!visible);
    };

    return (
        <td className="k-command-cell">
            <Button
                themeColor={'primary'}
                onClick={() =>
                    inEdit ? (isNewItem ? props.add(dataItem) : props.update(dataItem)) : props.edit(dataItem)
                }
            >
                {inEdit ? (isNewItem ? 'Add' : 'Update') : 'Edit'}
            </Button>
            <Button
                themeColor={'primary'}
                onClick={() =>
                    inEdit ? (isNewItem ? props.discard(dataItem) : props.cancel(dataItem)) : toggleDialog()
                }
            >
                {inEdit ? (isNewItem ? 'Discard' : 'Cancel') : 'Remove'}
            </Button>
            {visible && (
                <Dialog title={'Delete Data'} onClose={toggleDialog} width={350}>
                    <div>Are you sure you want to delete item with ID {dataItem.ProductID}?</div>
                    <DialogActionsBar>
                        <Button onClick={onDeleteData}>Delete</Button>
                        <Button onClick={toggleDialog}>Cancel</Button>
                    </DialogActionsBar>
                </Dialog>
            )}
        </td>
    );
};

Define the enterEdit, remove, add, update, discard and cancel functions needed by the command cell.

jsx

const enterEdit = (dataItem: Product) => {
    setEdit((edit) => ({ ...edit, [dataItem.ProductID!]: true }));
};

jsx

const remove = (dataItem: Product) => {
    const newData = [...deleteItem(dataItem)];
    setData(newData);
};

jsx

const add = (dataItem: Product) => {
    const newData = insertItem(dataItem);
    setData(newData);
    setEdit((edit) => ({ ...edit, [dataItem.ProductID!]: false }));
};

jsx

const discard = () => {
    const newData = [...data];
    newData.splice(0, 1);
    setData(newData);
};

jsx

const update = (dataItem: Product) => {
    const newData = updateItem(dataItem);
    setData(newData);
    setEdit((edit) => ({ ...edit, [dataItem.ProductID!]: false }));
};

jsx

const cancel = (dataItem: Product) => {
    const originalItem = getItems().find((p) => p.ProductID === dataItem.ProductID);
    const isNewlyAdded = dataItem.ProductID === null;

    if (isNewlyAdded) {
        const newData = data.filter((item) => item.ProductID !== null);
        setData(newData);
    } else if (originalItem) {
        const newData = data.map((item) => (item.ProductID === originalItem.ProductID ? originalItem : item));

        setData(newData);
        setEdit((edit) => ({ ...edit, [dataItem.ProductID!]: false }));
    }
};

Define a function for the onItemChange event which will handle the data changes during editing. The event provides the edited data item, the field being changed, and the new value available as onItemChange parameters.

jsx

<Grid onItemChange={onItemChange}>

jsx

const itemChange = (event: GridItemChangeEvent) => {
    const newData = data.map((item) =>
        item.ProductID === event.dataItem.ProductID
            ? {
                  ...item,
                  [event.field || '']: event.value
              }
            : item
    );
    setData(newData);
};

Per column, set the options that are related to row editing:

editable — Determines if the column is editable.
editor — Specifies the data type of the column and, based on that, sets the appropriate editor.

Inline

Setup

Suggested Links