Editing

The KendoReact Server Grid empowers you with robust data editing capabilities, offering flexible configuration options. You can configure this functionality in various ways depending on you application's requirements.

KendoReact Server Components are in an experimental phase and are not intended for production use. APIs may change without introducing a breaking change. Please refer to the Umbrella GitHub issue for general feedback, bug reports, and more information.

Upon any modifications to the data collection, the onDataChange callback is triggered. This callback, best managed through a server action, facilitates the implementation of necessary changes on the server side. The onDataChange callback is triggered with the following arguments:

• data—The updated data collection.
• action—The action that triggered the change. It can be one of the following:
  • update—An existing item was updated.

Editing requires you to pass a DataProvider to the Grid. The DataProvider is a component that provides a copy of the data on the client in order to enable editing.

Copy Codeimport { GridDataProvider } from "@progress/kendo-react-server-components";

// ...
<Grid 
  // ...
  DataProvider={GridDataProvider}
/>

Editing UI

The edit action can be initiated from anywhere inside the Grid and supports the following editing UI:

• Row Editing—Edit a row by clicking the edit button within the row.
• Cell Editing—Edit a cell by double-clicking it.

Row Editing

The Row Editing mode lets the user edit the content of a given row by clicking an Edit button. To enable this functionality:

1. Set the type field of the state.columns collection to "edit".

Copy Codeconst state = {
  // ...
  columns: [
    // ...
    {
      id: "edit",
      title: "",
      type: "edit",
    },
  ],
};

1. Pass the GridDataCellEditable and DataProvider components to the Grid component.

Copy Codeimport { GridDataCellEditable, GridDataProvider } from "@progress/kendo-react-server-grid";

export default async function Page() {
  return (
    <>
      <Grid
        // ...
        DataCell={GridDataCellEditable}
        DataProvider={GridDataProvider}
      />
    </>
  );
}

Experience the row editing in action through the KendoReact Server Grid example below:

Cell Editing

To activate the edit mode of a cell in the Grid you need to double-click it. You can enable this functionality by passing a custom DataCell to the Grid component, which renders the cell in edit mode upon double-clicking.

For convenience, you can use the ready-made custom cell GridDataCellEditable instead of the default GridDataCell component.

Copy Codeimport { GridDataCellEditable, GridDataProvider } from "@progress/kendo-react-server-grid";

export default async function Page() {
  return (
    <>
      <Grid
        // ...
        DataCell={GridDataCellEditable}
        DataProvider={GridDataProvider}
      />
    </>
  );
}

The following example demonstrates how to enable cell editing in the KendoReact Server Grid.

Double-click the Price or Units in Stock cell to enter edit mode. Press Enter to save the changes or Esc to discard them.

Additional Resources

• КendoReact Server Grid Overview
• Getting Started with KendoReact Server Grid