Spotting & Undoing AG Grid Cell Edits

Request

A user contacted us, asking what is the best way of achieving a 2-step action in AdapTable:

• have some way of visually indicating which Grid Cells have previously been edited

• provide the ability for run-time users to undo any edit, so the Cell returns to the initial value

Solution

This is possible in AdapTable by tying together 4 separate, pre-existing functionalities:

1. Data Change Monitoring so all data edits are automatically tracked by AdapTable

2. Distinctive style for edited cells so they can easily be identified

3. Custom Context Menu Item (which only appears in edited cells) to revert the data change

4. Adaptable API - which provides programmatic access to AdapTable functionality

Demo Example

We created a small demo for our user illustrating how the solution works.

In the demo example, we:

• turn on Data Changes and programatically edit first cell in Language column to 'Python'

• provide an editedCellStyle of gray, italicised background, to easily identify edited cells

• add an Undo Edit Custom Context Menu Item which appears only in edited cells, with onClick action to undo the edit

Data Change History Monitor

The first thing we did in our demo was to turn on the Data Change History Monitor.

This automatically tracks all data changes in AdapTable - both user edits and ticking data.

By default the Data Change Monitor is turned off, so a simple change was required in Data Change History Options:

dataChangeHistoryOptions: {
  activeByDefault: true,
},

Edited Cell Style

Next we configured the editedCellStyle property in User Interface Options to provide a bespoke, visual style for all Cells that have been edited.

This property allows you to create a custom Adaptable Style for all edited cells in AG Grid.

We create an edited cell style of italicised white font on a gray background:

userInterfaceOptions: {
  editedCellStyle: {
    BackColor: 'Gray',
    FontStyle: 'Italic'
  },
},

Context Menu Item

The last piece of the jigsaw was to create a Custom Context Menu Item called "Undo Edit" which appears in edited Cells and rolls back the Edit.

The Custom Menu Item's onClick prop performs 3 actions (all using Adaptable API functions):

• retrieves the Data Change History Item associated with that cell
• undoes the Change History Item (essentially reverting the edit)
• refreshes the Grid Cell (which will remove the edited cell style)

const undoEditMenuItem: UserContextMenuItem = {
  menuType: 'User',
  label: 'Undo Edit',
  icon: {
    name: 'undo',
  },
  hidden: !adaptableApi.gridApi.isCellEdited(context.gridCell),
  onClick: () => {
    const change: CellDataChangedInfo =
      context.adaptableApi.dataChangeHistoryApi.getDataChangeForGridCell(
        context.gridCell
      );
    if (change) {
      context.adaptableApi.dataChangeHistoryApi.undoDataChangeHistoryEntry(
        change
      );
      adaptableApi.gridApi.refreshGridCell(context.gridCell);
    }
  },
};