SpreadJS 14
Features / Worksheet / Undo and Redo
In This Topic
    Undo and Redo
    In This Topic

    You can use Ctrl + Z to undo an action in the widget. You can then use Ctrl + Y to redo the action you canceled.

    You can undo the following types of actions:

    The following actions do not respond to Ctrl + Z:

    You can prevent or allow the undo action in code with the options.allowUndo property.

    After setting the allowUndo property to true, you can undo or redo an action by using the startTransaction() method, undoTransaction() method and the endTransaction() method.

    Using Code

    This example sets the options.allowUndo property and specifies an action.

    JavaScript
    Copy Code
    spread.options.allowUndo = true;
    spread.commandManager().execute({cmd: "outlineRow", sheetName: activeSheet.name(), index: 3, count: 5});
    

    This example changes the background color of a cell using the startTransaction() method, undoTransaction() method and the endTransaction() method.

    JavaScript
    Copy Code
    var command = { canUndo: true, execute: function (context, options, isUndo)
      {
        var Commands = GC.Spread.Sheets.Commands;
        if (isUndo)
        {
           Commands.undoTransaction(context, options);
           return true;
        }
        else
        {
          Commands.startTransaction(context, options);
          var sheet = context.getSheetFromName(options.sheetName);
          var cell = sheet.getCell(options.row, options.col);
          cell.backColor(options.backColor);
          Commands.endTransaction(context, options);
          return true;
        }
      }
    };
    var spread = GC.Spread.Sheets.findControl(document.getElementById("sampleDiv"));
    var commandManager = spread.commandManager();
    commandManager.register("changeBackColor", command);
    commandManager.execute({ cmd: "changeBackColor", sheetName: spread.getSheet(0).name(), row: 1, col: 2, backColor: "red" });
    

    Limit the Number of Undo and Redo Operations

    You can set a limit on the number of undo and redo operations by controlling the undo and redo stack size. The maxSize method in undoManager class can be used to do the same. This helps in increasing the application performance by reducing the memory consumption.

    Note: If an invalid value is passed to the maxSize method, undoManager is returned.

    JavaScript
    Copy Code
    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    let undoManager = spread.undoManager();
    undoManager.maxSize(20);        // set max size.
    let maxSize = undoManager.maxSize();    // get max size.
    

    Get Undo and Redo Stack

    You can use getUndoStack and getRedoStack functions to retrieve the undo and redo stacks. These functions return the stacks as objects including the string values for sheet name and commands.

    JavaScript
    Copy Code
    function getUndoStackFunction() {
        console.log(spread.undoManager().getUndoStack());
    }
    
    function getRedoStackFunction() {
        console.log(spread.undoManager().getRedoStack());
    }
    

    You can also use these functions to create custom menus and display the list of undo and redo operations in the spreadsheet.

    JavaScript
    Copy Code
    <body>
        <input type="button" value="Get Undo Stack" onclick="getUndoStackFunction()">
        <input type="button" value="Get Redo Stack" onclick="getRedoStackFunction()">
    </body>
    

    The SpreadJS Designer displays the undo and redo stacks as the list of operations in a dropdown list. You can select any operation to navigate the spreadsheet at that specific point.
    undo redo stack in SpreadJS Designer

    See Also