How to set tag and undo tag by keyPress

How to set tag and undo tag by keyPress

Posted by: khoapcse90038 on 29 March 2023, 1:02 pm EST

• 

  khoapcse90038

  • Post Options:
  • Link
    Copy

  Posted 29 March 2023, 1:02 pm EST - Updated 29 March 2023, 1:08 pm EST

  Hi teams,
  
  I input content “KhoaPC” in cell A7 and set tag: “khoapc tag”.
  
  When i delete content by keyPress Delete. This content was removed, but tag in cell couldn’t.
  
  Can you help me how to remove tag and content when delete cell & undo when use Ctrl + Z (or undo).

  Thanks

  

  1525×625 38.6 KB

  https://www.grapecity.com/spreadjs/demos/features/cells/tags/tag-basic/react

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 30 March 2023, 3:46 pm EST

  Hello,

  When you press Delete key, the “clearValues” command is executed in SpreadJS. This command only removes the values from the selected cell range. It does not remove tags, styles etc.

  You can create a custom command which removes values as well as tags from the selected cell range. You can utilize cellRange.clear() method to remove tags from a cell range. You need to remove default command “clearValues” from Delete key binding and register custom command with command manager using commandManager.register() method. So that, when you press Delete key, the custom command is executed.

  Please refer to the code snippet and attached sample for further understanding.

      let commandManager = spread.commandManager();
  
      // creates a command
      let command = {
          canUndo: true,
          execute: function (context, options, isUndo) {
              let Commands = GC.Spread.Sheets.Commands;
              options.cmd = "customDelete";
              if (isUndo) {
                  Commands.undoTransaction(context, options);
                  return true;
              } else {
                  Commands.startTransaction(context, options);
                  let sheet = context.getActiveSheet();
                  let selections = sheet.getSelections();
                  for (let selection of selections) {
                      let range = sheet.getRange(selection.row, selection.col, selection.rowCount, selection.colCount);
                      range.clear(GC.Spread.Sheets.StorageType.data);
                      range.clear(GC.Spread.Sheets.StorageType.tag);
                  }
                  Commands.endTransaction(context, options);
                  return true;
              }
          }
      };
      // removes the default clearValues command
      commandManager.register("clearValues", null, GC.Spread.Commands.Key.del, false, false, false, false);
      // adds a custom command to delete values and tags in the selected cell range
      commandManager.register("customDelete", command, GC.Spread.Commands.Key.del, false, false, false, false);
  

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

  Please let us know if you face any issues. You could created the SpreadJS Cases on the dedicated SpreadJS Forum at https://www.grapecity.com/forums/spreadjs

  Doc references:

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

  cellRange.clear():https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.CellRange#clear

  StorageType enumeration: https://www.grapecity.com/spreadjs/api/v15/enums/GC.Spread.Sheets.StorageType

  Regards,

  Ankit