syidaxgrid
Home Pricing Settings

GRID FEATURE

Edit history

Undo or redo recorded editing transactions. One operation may contain multiple cell changes, so cell counts and history counts are not necessarily equal.

Markdown source Features

How it works and when to use it

New edits after undo may alter the redo path. Also define history retention when resetting the view or replacing data.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Undo an accidental value change

Edit and commit a quantity, then restore its previous value.

javascript
console.log(await grid.getUndoRedoDepth());
console.log(await grid.undo());

Verify the result: The last recorded operation returns to its previous values. Disable the button when there is nothing to undo.

Example 2. Redo an undone operation

Call this when redo history is available.

javascript
console.log(await grid.redo());

Verify the result: The same operation is reapplied. If a new edit followed undo, read redo availability again.

Example 3. Clear history when switching work contexts

This policy clears the previous view's history before opening a different order data set.

javascript
await grid.clearHistory();
grid.addEventListener('historyChanged', event => console.log(event.detail));

Verify the result: Prevent changes from a previous context from being undone against new data. This does not delete data snapshots or server records.

Combining features and troubleshooting

Undoing a value in the browser does not automatically undo it on the server. Decide whether to save the reversal or handle it through a separate compensating operation.

Keep history counts and button states synchronized, and test operations with multiple changes such as batch editing and filling.

Related reading