Undo and Redo in ASP.NET Core Spreadsheet control

28 Jul 20264 minutes to read

The Undo option reverses the last action performed in the Spreadsheet. The Redo option reapplies the most recently undone action. Use the allowUndoRedo property to enable or disable undo and redo functionality in the Spreadsheet.

NOTE

  • The default value of the allowUndoRedo property is true.

By default, the UndoRedo module is injected internally into the Spreadsheet to perform undo and redo operations.

Undo

Undo reverses the last action performed in the Spreadsheet. You can perform an undo operation in one of the following ways:

  • Open the Home tab in the ribbon and choose Undo.
  • Press Ctrl + Z.
  • Use the undo() method programmatically.

Redo

Redo reapplies the action that was most recently undone in the Spreadsheet. You can perform a redo operation in one of the following ways:

  • Open the Home tab in the ribbon and choose Redo.
  • Press Ctrl + Y.
  • Use the redo() method programmatically.

Update custom actions in the UndoRedo collection

Use the updateUndoRedoCollection() method to add or update custom actions in the UndoRedo collection. Use the actionComplete event to customize the undo and redo behavior of those actions.

The following code example shows How to update and customize your own actions for undo redo functionality in the Spreadsheet control.

<button id="customBtn" class="e-btn"> add/remove Class</button>

<ejs-spreadsheet id="spreadsheet" allowUndoRedo="true" actionComplete="onActionComplete">

</ejs-spreadsheet>

<script>
    document.getElementById("customBtn").addEventListener('click', updateCollection);

    function onActionComplete(args) {
        var actionEvents = args;
        var spreadsheetObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
        if (actionEvents.eventArgs.action == "customCSS") {
            var Element = spreadsheetObj.getCell(actionEvents.eventArgs.rowIdx, actionEvents.eventArgs.colIdx);
            if (actionEvents.isUndoRedo && actionEvents.isUndo) {
                Element.classList.remove('customClass'); // To remove the custom class in undo action
            }
            else {
                Element.classList.add('customClass');// To add the custom class in redo action
            }
        }
    }

    function updateCollection() {
        var spreadsheetObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet'),
            cell = spreadsheetObj.getActiveSheet().activeCell,
            cellIdx = ej.spreadsheet.getRangeIndexes(cell),
            Element = spreadsheetObj.getCell(cellIdx[0], cellIdx[1]);
        if (!Element.classList.contains("customClass")) {
            Element.classList.add('customClass'); // To add the custom class in active cell element
            spreadsheetObj.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: cellIdx[0], colIdx: cellIdx[1], action: 'customCSS' } }); // To update the undo redo collection
        }
    }
</script>

<style>
    .customClass.e-cell {
        background-color: red;
    }
</style>
public IActionResult Index()
{
    return View();
}

See Also