Undo/Redo not working when we use CellChanged event

Undo/Redo not working when we use CellChanged event

Posted by: serdarhoja on 30 March 2023, 8:30 pm EST

• 

  serdarhoja

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 March 2023, 8:30 pm EST

  Good morning, Grapecity Team!

  I am using Designer Component, but when I want use CellChanged event for wordWrap and autoFitRow the undo/redo (getUndoStack/getRedoStack) working not correctly.
  
  Can you help me please!
  
  Thank your very much!

  The part of my code:

  	 sheet.bind(GC.Spread.Sheets.Events.CellChanged, (e, args) => {
            if (args.propertyName === "value" ) {
              console.log("undo",spread.undoManager().getUndoStack())
              console.log("redo",spread.undoManager().getRedoStack())
              args.sheet.getCell(args.row, args.col).wordWrap(true);
              args.sheet.autoFitRow(args.row);
            }
          });

• 

  serdarhoja

  • Post Options:
  • Link
    Copy

  Posted 30 March 2023, 8:31 pm EST - Updated 31 March 2023, 1:30 am EST

  If shortly, only one of them (undo/redo and wordWrap/autoFitRow) working at the same time

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 2 April 2023, 11:22 pm EST

  Hello Serdar,

  The reason why undo and redo do not work properly is because any operation performed with APIs is not undoable and redoable by default. In order to make an operation or action undoable and redoable, you need to wrap it inside a command and execute the command using command manager.

  You can register a command with command manager using commandManager.register() method. Inside the execute method of the command, GC.Spread.Sheets.Commands.startTransaction() and GC.Spread.Sheets.Commands.endTransaction() methods are used respectively to store the changes in the state of the spread. To execute the command, you can utilize the commandManger.execute() method.

  Please refer to the attached sample for further understanding.

  Sample: https://jscodemine.grapecity.com/share/6FNCVpQJ9ECe3CXSmTu1tQ/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Doc references:

  commandManger.register(): https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Commands.CommandManager#register

  commandManger.execute(): https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Commands.CommandManager#execute

  GC.Spread.Sheets.Commands.startTransaction(): https://www.grapecity.com/spreadjs/api/v16/modules/GC.Spread.Sheets.Commands#starttransaction

  GC.Spread.Sheets.Commands.endTransaction(): https://www.grapecity.com/spreadjs/api/modules/GC.Spread.Sheets.Commands#endtransaction

  Custom Action Demo: https://www.grapecity.com/spreadjs/demos/features/worksheet/actions/custom-action#demo_source_name

  Regards,

  Ankit

• 

  serdarhoja

  • Post Options:
  • Link
    Copy

  Posted 4 April 2023, 1:34 am EST - Updated 4 April 2023, 1:39 am EST

  Hello, Ankit

  Thank you for your help!
  
  My question was a little different. Undo is working normal, but redo do not. In your sample example too. I attach video

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 6 April 2023, 3:32 am EST

  Hello Serdar,

  The redo operation was not performed correctly because when you execute the custom command in the event handler of CellChanged event, the “editCell” command is not stored on the undo manager at that time. “editCell” command is executed every time a cell value is changed on the sheet.

  Alternatively, you can execute custom command inside the handler of EditEnded event. So, when you execute custom command, editCell command is already stored on undo manager. It keeps undo and redo actions/changes in order. This way, both undo and redo operations run correctly.

  Please refer to the code snippet and attached sample.

  sheet.bind(GC.Spread.Sheets.Events.EditEnded, (e, args) => {
      if (args.committed) {
          commandManager.execute({
              cmd: 'customCommand',
              row: args.row,
              col: args.col,
          });
      }
  });

  Sample: https://jscodemine.grapecity.com/share/VmD0xBaJFkWlPeNPRC5SRw/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Doc references:

  EditEnded event: https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Events#editended

  commandManager.execute(): https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Commands.CommandManager#execute

  Regards

  Ankit

• 

  serdarhoja

  • Post Options:
  • Link
    Copy

  Posted 6 April 2023, 5:25 pm EST

  Thank you very much, Ankit

  Regards,
  
  Serdar