ag-Grid provides a great editing experience out of the box. However, you may run into some limitations when performing validation on editing cells. This is because ag-Grid editors will always exit edit-mode if another cell is clicked.

In case where you need extra flexibility in handling cell content, you can create a cell renderer and take control of the full editing lifecycle. We’ll demonstrate this approach in a ToDo List application written in **TypeScript **and React.The app is documented using TypeDoc and is available on GitHub and StackBlitz.

💡 If you would like to generate documentation for this application you can clone this Github repository and then run the script named ‘doc’ (see the package.json file).

We’ll be going through:

• Using Cell Renderers as Editors
• Entering Edit Mode
• React context
• Hooking renderers to the React context
• Exiting Edit Mode
• Getting the editors
• Committing changes
• Rolling back changes
• Styling rows based on their selection status
• Binding selection status to a checkbox
• Using selection status to style editors
• Customising the ag-Grid theme

Using Cell Renderers as Editors

---

ag-Grid provides a great editing experience out of the box. However, you may run into some limitations when performing validation on editing cells. This is because ag-Grid editors will always exit edit-mode if another cell is clicked.

In case where you need extra flexibility in handling cell content, you can create a cell renderer and take full control of the editing lifecycle.

Entering Edit Mode

---

-

Entering edit mode when using renderers as editors requires a flag that lets the renderers know whether they are in edit mode or read mode. You’ll also have to update that flag accordingly.

React context

Our demo ag-Grid subscribes to a React Context object that holds the following variables:

• mockEditingId - the id of the row node currently in edit mode.
• setMockEditingId - a function that takes an id and updates mockEditingId.

// src/context/MockEditingContext.tsx
export interface IMockEditingContext {
    /** ID of the node in {@link Grid} in mock-edit mode */
    mockEditingId: string,
    /** function to update the mockEditingId */
    setMockEditingId: (id: string) => void
}

📔 The demo application refers to edit mode as mock-edit mode. This is simply to differentiate between the out of the box ag-Grid editing and the renderers being used as editors

Hooking renderers to the React context

When the pen icon on a row node is clicked, mockEditingId is set to the id of that row node (provided that there are no other nodes currently editing).

#ag-grid #react #typescript #editing