Adding Undo/Redo to a Ribbon with SpreadJS

Utilizing a Ribbon toolbar with SpreadJS is useful and gives control to end-users without needing to have the knowledge of the code behind it. Users might also need to undo or redo an action, which is possible with keyboard shortcuts, but not with buttons in the Ribbon. This tutorial will show how to add undo/redo functionality for a particular button on the ribbon toolbar. This tutorial is a continuation of: Adding a Ribbon to SpreadJS Download the source code for this tutorial: SpreadJS Ribbon Undo/Redo

Choose a Button and Create an Action

A simple button to add undo/redo functionality to is the "Add Row" button, which simply adds a row to the end of the current sheet. The Add Row button on the ribbon bar created in the previous blog. To start off, create a new undo/redo action for this particular button by writing a function and defining its prototype:

function AddRowUndoRedoAction(sheet, rowCount) {  
    this._oldRowCount = rowCount;  
    this._rowCount = rowCount;  
    this._sheet = sheet;  
}  

AddRowUndoRedoAction.prototype = new GcSpread.Sheets.UndoRedo.ActionBase();

Adding a row only needs three variables: the original number of rows, the number of rows after adding, and the active sheet. Other actions could require more variables to keep track of, but for the purposes of this example we will use the simplest action. Next, define the prototype’s “execute” method, which will be called whenever the action is executed. In this case, adding a row simply increases the number of rows in the active sheet by one:

AddRowUndoRedoAction.prototype.execute = function (args) {  
    this.\_sheet.setRowCount(this.\_rowCount);  
}

For the purpose of undoing the action: 1. Define the "saveState" method of the action, which saves the state for undoing the action:

AddRowUndoRedoAction.prototype.saveState = function () {  
    this.\_oldRowCount = this.\_sheet.getRowCount();  
}

2. Define the "undo" method of the action, which is called when the user presses Ctrl+Z. In this case, the number of rows is decreased by one:

AddRowUndoRedoAction.prototype.undo = function (args) {  
    this.\_sheet.setRowCount(this.\_oldRowCount - 1);  
    return true;  
}

Connect the Button to the New Action

Connect this action to the add row button by replacing the original code for the button with the new action: This code:

$("#ribbon-msofficeButtonAddRow").click(function () {  
    activeSheet = spread.getActiveSheet();  
    activeSheet.setRowCount(activeSheet.getRowCount() + 1);  
});

is replaced with this code:

$("#ribbon-msofficeButtonAddRow").click(function () {  
    activeSheet = spread.getActiveSheet();  
    activeSheet.doCommand(new AddRowUndoRedoAction(activeSheet, activeSheet.getRowCount() + 1));  
    spread.focus();  
});

When the user clicks the add row button, they can undo it by pressing Ctrl+Z. To add undo/redo functionality for other buttons in the ribbon, create new undo/redo actions for those buttons, similar to this tutorial, and pass them into the doCommand method for the active sheet in each button.click function like the code above.