Change border of active cell

Change border of active cell

Posted by: averma on 21 August 2026, 12:50 am EST

• 

  averma

  • Post Options:
  • Link
    Copy

  Posted 21 August 2026, 12:50 am EST

  What are the classes responsible for changing the border of active cell while typing ?
  
  We want to change the color of border of cell while typing to #5F2BFF and then revert to original when we move away from that cell.

• 

  averma

  • Post Options:
  • Link
    Copy

  Posted 21 August 2026, 1:16 am EST - Updated 21 August 2026, 1:21 am EST

  Currently i’m able to change the color but default blue border should not be there, my border is coming below or on top of it.
  
  const onStart = () => {
  
  const s = spread.getActiveSheet();
  
  s.options.selectionBorderColor = ‘transparent’;
  
  s.repaint();

  requestAnimationFrame(() => {
  
  const editorEl = document.querySelector(‘[gcuielement=“gcEditingInput”]’) as HTMLElement | null;
  
  if (editorEl) {
  
  editorEl.style.setProperty(‘outline’, ‘none’, ‘important’);
  
  editorEl.style.setProperty(‘border-style’, ‘solid’, ‘important’);
  
  editorEl.style.setProperty(‘border-width’, ‘2px’, ‘important’);
  
  editorEl.style.setProperty(‘border-color’, ‘#5F2BFF’, ‘important’);
  
  }
  
  });
  
  };

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 21 August 2026, 7:41 am EST

  Hi,

  We checked this behavior, and it appears that it is currently not supported, nor have we found a way to achieve it. We are confirming this with our development team. Once we receive confirmation, we will provide you with an update.

  The internal tracking ID for this issue is SJS-35709.

  Regards,
  
  Priyam

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 31 August 2026, 4:37 am EST

  Hi,

  We checked this requirement with our development team. The devs mentioned that, in SpreadJS 19.2.1, the border displayed around the cell while it is in edit mode belongs to the cell type’s editor border container, and its style is currently fixed.

  However, you can achieve the requested behavior using the following workaround:

  var oldUpdateEditor = GC.Spread.Sheets.CellTypes.Text.prototype.updateEditor;
  
  GC.Spread.Sheets.CellTypes.Text.prototype.updateEditor = function (editorContext, cellStyle, cellRect, context) {
      var result = oldUpdateEditor.apply(this, arguments);
      var borderContainer = editorContext?.parentElement?.parentElement;
      if(borderContainer)
          borderContainer.style.border = "2px solid #5F2BFF";
      return result;
  };

  With this workaround, the editor border can be changed to the desired custom color, such as #5F2BFF, while the cell is in edit mode. Once editing is completed, the editor and its border container are removed, so the standard selection border is restored automatically.

  Additionally, if you need to customize other cell styles specifically while the cell is in edit mode, you can use the Edit cell state (stateType = edit) to configure the desired styles.

  Please refer to the following documentation for more information about Cell States:

  SpreadJS Cell States Documentation: https://developer.mescius.com/spreadjs/docs/features/cells/cell-states?utm_source=chatgpt.com#site_main_content-doc-content_title

  Regards,
  
  Priyam