RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline below:

React Data Grid Editing Inline Editing

Premium

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

The Inline Editing feature of the Grid is part of KendoReact premium, an enterprise-grade UI library with 120+ free and premium components for building polished, performant apps. Test-drive all features with a free 30-day trial.Start Free Trial

The following example demonstrates how to implement the inline editing.

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.
```
const [edit, setEdit] = React.useState<EditDescriptor>({});
```
```
<Grid
    edit={edit}
    editable={true}
>
```

Configure the command column by defining the command buttons inside the GridCellProps 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.

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}
        />
    );
};

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.

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

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

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

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

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

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.

<Grid onItemChange={onItemChange}>

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.