Framework:Javascript GridAngular GridReact GridVue Grid

JavaScript Grid: Undo / Redo Edits

This section covers how to allow users to undo / redo their cell edits.

When Cell Editing is enabled in the grid, it is usually desirable to allow users to undo / redo any edits.

Users can change the contents of cells through the following grid features:

This Undo / Redo feature is designed to be a recovery mechanism for user editing mistakes. Performing grid operations that change the row / column order, e.g. sorting, filtering and grouping, will clear the undo / redo stacks.

Enabling Undo / Redo

The following undo / redo properties are provided in the grid options interface:

const gridOptions = {
    undoRedoCellEditing: true,
    undoRedoCellEditingLimit: 20,

    // other grid options ...
}

As shown in the snippet above, undo / redo is enabled through the undoRedoCellEditing property.

The default number of undo / redo steps is 10. To change this default the undoRedoCellEditingLimit property can be used.

Undo / Redo Shortcuts

The following keyboard shortcuts are available when undo / redo is enabled:

  • Ctrl+Z / CMD+Z: will undo the last cell edit(s).
  • Ctrl+Y / CMD+SHIFT+Z: will redo the last undo.

Note that the grid needs focus for these shortcuts to have an effect.

Undo / Redo API

It is also possible to programmatically control undo / redo and check the number of currently available undo / redo actions. These API methods are listed below:

// perform undo
gridOptions.api.undoCellEditing();

// perform redo
gridOptions.api.redoCellEditing();

// obtain current number of available undo
gridOptions.api.getCurrentUndoSize();

// obtain current number of available redo actions
gridOptions.api.getCurrentRedoSize();

Example: Undo / Redo

The example below has the following grid options enabled to demonstrate undo / redo:

const gridOptions = {
    defaultColDef: {
        // makes all cells editable
        editable: true
    },

    // allows copy / paste using cell ranges
    enableRangeSelection: true,

    // enables the fill handle
    enableFillHandle: true,

    // enables undo / redo
    undoRedoCellEditing: true,

    // restricts the number of undo / redo steps to 5
    undoRedoCellEditingLimit: 5,

    // enables flashing to help see cell changes
    enableCellChangeFlash: true,

    // other grid options ...
}

To see undo / redo in action, try the following:

  • Cell Editing: click and edit some cell values.
  • Fill Handle: drag the fill handle to change a range of cells.
  • Copy / Paste: use CTRL+C / CTRL+V to copy and paste a range of cells.
  • Undo Shortcut: use CTRL+Z to undo the cell edits.
  • Redo Shortcut: use CTRL+Y to redo the undone cell edits.
  • Undo API: use the 'Undo' button to invoke gridApi.undoCellEditing().
  • Redo API: use the 'Redo' button to invoke gridApi.redoCellEditing().
  • Undo / Redo Limit: only 5 actions are allowed as undoRedoCellEditingLimit=5.