Change keyboard action

Change keyboard action

Posted by: pedro.moraes on 19 August 2024, 4:23 pm EST

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 August 2024, 4:23 pm EST

  Hello,

  Could I change the keyboard action?

  For example:
  
  When I press the Enter key I go to the bottom line but I want to edit from the cell

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 20 August 2024, 4:23 am EST

  Hi,

  You could override the “isReservedKey” method and return true for the “Enter” key to handle the keyboard event itself. And then add the keydown event to start/stop the cell edit.

  Kindly refer to the following code snippet and the sample:

  // Add KeyDown Listener to the SpreadJS's host element
  spread.getHost().addEventListener('keydown', (event) => {
      if(event.key === "Enter") {
          // Peform Custom Action
          let activeSheet = spread.getActiveSheet();
          if(activeSheet.isEditing()) {
              activeSheet.endEdit();
          } else {
              setTimeout(() => {
                  activeSheet.startEdit();
              })
          }
      }
  }, true)
  
  // Override the isReservedKey method
  let oldFn = GC.Spread.Sheets.CellTypes.Text.prototype.isReservedKey;
  GC.Spread.Sheets.CellTypes.Text.prototype.isReservedKey = function(e, context) {
      if(e.key === "Enter") {
          return true;
      }
      return oldFn.apply(this, arguments);
  }

  Sample: https://jscodemine.mescius.io/share/LELWtvVoR0CAmayQYV6i-w/?defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  References:

  isReservedKey method: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.Text#isreservedkey

  startEdit method: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#startedit

  endEdit method: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#endedit

  Regards,

  Ankit

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy

  Posted 2 September 2024, 12:48 pm EST

  It worked,

  But if I’m editing a formula with data from another shhet, when I finish with “Enter” it doesn’t go back to the current sheet

  Can you help me?

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 3 September 2024, 6:58 am EST

  Hi,

  I was able to observe the behavior on my end, which seems to be caused by manually handling the Enter key action.

  To address this, you can check if the sheets are not the same when the Enter key is pressed while the cell is in edit mode. In such cases, you can avoid manually handling the action and let the default behavior operate. Additionally, in the EditEnded event, you can shift the active cell one row up as required. To identify the active sheet when the cell enters edit mode, you can use the EditStarting event. Refer to the attached snippet and sample.

  let editSheet = null;
  let flag = false;
  
  spread.bind(GC.Spread.Sheets.Events.EditStarted, (e, args) => {
      editSheet = args.sheet;
  });
  spread.bind(GC.Spread.Sheets.Events.EditEnded, (e, args) => {
      if (flag) {
          args.sheet.setActiveCell(args.sheet.getActiveRowIndex() - 1, args.sheet.getActiveColumnIndex());
          editSheet = null;
          flag = false;
      }
  });
  
  // Add KeyDown Listener to the SpreadJS's host element
  spread.getHost().addEventListener(
      'keydown',
      (event) => {
          if (event.key === 'Enter') {
              // Perform Custom Action
              let activeSheet = spread.getActiveSheet();
              if (activeSheet.isEditing()) {
                  activeSheet.endEdit();
              } else {
                  setTimeout(() => {
                      activeSheet.startEdit();
                  });
              }
          }
      },
      true
  );
  
  // Override the isReservedKey method
  let oldFn = GC.Spread.Sheets.CellTypes.Text.prototype.isReservedKey;
  GC.Spread.Sheets.CellTypes.Text.prototype.isReservedKey = function (e, context) {
      if (e.key === 'Enter') {
          if (context.isEditing && context.sheet.name() !== editSheet.name()) {
              flag = true;
              return false;
          } else {
              return true;
          }
      }
      return oldFn.apply(this, arguments);
  };

  Sample: https://jscodemine.mescius.io/share/QydrSLI4tEK8FyRMbZlxzA/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Regards,
  
  Priyam