Undo Redo For GridLines

Undo Redo For GridLines

Posted by: sbhadane on 26 August 2025, 6:37 am EST

• 

  sbhadane

  • Post Options:
  • Link
    Copy

  Posted 26 August 2025, 6:37 am EST - Updated 26 August 2025, 6:53 am EST

  Hi team , I am trying to implement a custom undo redo functionality for Gridlines , but the undo is not working , supposedly the action is not getting pushed to the undo stack , since on undo its not executing the function .
  
  Is Gridline operation undoable ?

  Following is the code snippet

          var setGridLines = {
              canUndo: true,
              execute: function (context, options, isUndo) {
                  debugger;
                  let sheet = context.getSheetFromName(options.sheetName);
                  let Commands = GC.Spread.Sheets.Commands;
                  var formatType = isUndo ? "undo" : options.formatType;
                  if (isUndo) {
                      Commands.undoTransaction(context, options);
                  } else {
                      Commands.startTransaction(context, options);
                      // Get current gridline options from the sheet obtained from the context
                      let currentGridlineOptions = sheet.options.gridline;
                      // Create a new gridline object with toggled values to ensure change tracking
                      sheet.options.gridline = {
                          showVerticalGridline: !currentGridlineOptions.showVerticalGridline,
                          showHorizontalGridline: !currentGridlineOptions.showHorizontalGridline,
                          color: currentGridlineOptions.color
                      };
                      Commands.endTransaction(context, options);
                  }
                  return true;
              }
          };

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 August 2025, 11:27 pm EST

  Hi,

  Thanks for the details. In SpreadJS, sheet option changes (such as gridline visibility) are not automatically reverted by the built-in undo/redo mechanism. This behavior is by design.

  To support undo in this scenario, the restore logic needs to be handled manually inside your custom command. As a workaround, please refer to the updated execute function below, which ensures gridline changes are reverted correctly on undo:

  execute: function (context, options, isUndo) {
      let Commands = GC.Spread.Sheets.Commands;
      const sheet = context.getSheetFromName(options.sheetName);
      if (isUndo) {
          Commands.undoTransaction(context, options);
          sheet.suspendPaint();
          const currentGridlineOptions = sheet.options.gridline;
          sheet.options.gridline.showVerticalGridline = !currentGridlineOptions.showVerticalGridline;
          sheet.options.gridline.showHorizontalGridline = !currentGridlineOptions.showHorizontalGridline;
          sheet.resumePaint();
      } else {
          Commands.startTransaction(context, options);
          sheet.suspendPaint();
          const currentGridlineOptions = sheet.options.gridline;
          sheet.options.gridline.showVerticalGridline = !currentGridlineOptions.showVerticalGridline;
          sheet.options.gridline.showHorizontalGridline = !currentGridlineOptions.showHorizontalGridline;
          sheet.resumePaint();
          Commands.endTransaction(context, options);
      }
      return true;
  }

  You can also refer to the attached sample using this snippet, which demonstrates undo/redo of gridline visibility (see below).

  For more details, here is the list of supported undo operations in SpreadJS: https://developer.mescius.com/spreadjs/docs/features/worksheet/undo.

  Please let us know if you run into any further issues or need additional assistance.

  Best Regards,
  
  Chirag Gupta

  Attachment: https://jscodemine.mescius.io/share/PgQj_gmFBEiHu0C5VUnIXA/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fapp.js"]%2C"ActiveFile"%3A"%2Fapp.js"}