Vue Data 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:

• Cell Editing
• Copy / Paste
• Fill Handle

Enabling Undo / Redo

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

<ag-grid-vue
    :undoRedoCellEditing="undoRedoCellEditing"
    :undoRedoCellEditingLimit="undoRedoCellEditingLimit"
    /* other grid options ... */>
</ag-grid-vue>

this.undoRedoCellEditing = true;
this.undoRedoCellEditingLimit = 20;

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 / Command+Z: will undo the last cell edit(s).
• Ctrl+Y / Command+Y: 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:

undoCellEditing = () => void;

redoCellEditing = () => void;

getCurrentUndoSize = () => number;

getCurrentRedoSize = () => number;

Example: Undo / Redo

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

<ag-grid-vue
    :defaultColDef="defaultColDef"
    :enableRangeSelection="enableRangeSelection"
    :enableFillHandle="enableFillHandle"
    :undoRedoCellEditing="undoRedoCellEditing"
    :undoRedoCellEditingLimit="undoRedoCellEditingLimit"
    :enableCellChangeFlash="enableCellChangeFlash"
    /* other grid options ... */>
</ag-grid-vue>

this.defaultColDef = {
    // makes all cells editable
    editable: true
};

// allows copy / paste using cell ranges
this.enableRangeSelection = true;

// enables the fill handle
this.enableFillHandle = true;

// enables undo / redo
this.undoRedoCellEditing = true;

// restricts the number of undo / redo steps to 5
this.undoRedoCellEditingLimit = 5;

// enables flashing to help see cell changes
this.enableCellChangeFlash = true;

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.

// Loading...