Setting tab index or getting keycode from ActiveCellChanged event

Setting tab index or getting keycode from ActiveCellChanged event

Posted by: brian.ploe on 16 May 2025, 2:00 pm EST

• 

  brian.ploe

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 May 2025, 2:00 pm EST

  Before I start:
  
  I’m using SpreadJS 18.x and the ActiveCellChanged event isn’t detailed in the documentation at https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Events#class-events

  But this event is part of the event class here: GC.Spread.Sheets.Events.ActiveCellChanged when I use it in practice. What gives?

  Onto my main question:
  
  I have a form that I want to set tab indexes on for the cells. There is no purpose in letting the tab key continue to tab down the same row after reaching the end of the form.
  
  I want to be able to set a tab index or at least intercept the keydown event so I can see what cell the user is leaving (by way of the tab key) and send them to the first column on the next row.

  The ActiveCellChanged event does not provide the event keyCode so it is of little use.
  
  I tried to set a window event for keydown so I could set a global variable that I interrogate in ActiveCellChanged but spreadjs hijacks the tab keydown event and does not bubble it up trhough the DOM.

  What is the best way for me to achieve this?

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 20 May 2025, 5:01 am EST - Updated 20 May 2025, 5:06 am EST

  Hi,

  Apologies for the delay caused over the weekend.

  You’re correct that the GC.Spread.Sheets.Events.ActiveCellChanged event appears in the API, but to clarify — this is an internal event within SpreadJS and not intended for public use. As such, it’s not documented and doesn’t provide key event details (like keyCode), which makes it unsuitable for use cases like custom navigation handling with the Tab key.

  Recommended Solution for Custom Cell Navigation using Tab Key

  Since SpreadJS handles keyboard interactions (including the Tab key) via its Command Manager, the best approach is to intercept and override the default Tab shortcut in SpreadJS Command Manager.

  Here’s how to register a custom Tab handler that moves focus to the first column of the next row:

  const customTabCommandName = "customTabCommand";
  const customTabCommand = {
    canUndo: false,
    execute: function (context, options) {
    const sheet = context.getSheetFromName(options.sheetName);
    const row = sheet.getActiveRowIndex();
    sheet.suspendPaint();
    sheet.setActiveCell(row + 1, 0);
    sheet.resumePaint();
    return true;
    }
  };
  spread.commandManager().register(customTabCommandName, customTabCommand);
  spread.commandManager().setShortcutKey(
    customTabCommandName,
    GC.Spread.Commands.Key.tab,
    false, false, false, false
  );

  You can further refer to the attached code sample that uses the above code snippet and moves the active cell focus from the current cell to the next line cell (see below).

  Please feel free to reach out if you encounter any further issues or require additional guidance.

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

  GIF:

  Regards,