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:
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:
<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:
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
.