Highlight a row in spreadJS

Highlight a row in spreadJS

Posted by: pavloboiko on 27 May 2025, 3:57 am EST

• 

  pavloboiko

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 May 2025, 3:57 am EST - Updated 27 May 2025, 4:02 am EST

  I want to highlight a row to show that some action is being done to it. It’s not very important how it will look like, but some of the examples are in the attachments
  
  

  

  1069×238 26.1 KB

  

  3024×200 65.8 KB

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 28 May 2025, 2:41 am EST

  Hi,

  Based on your requirement to highlight a row when any changes occur within it, you can achieve this using the ValueChanged event. This event is triggered whenever a cell’s value changes. Within the event handler, you can retrieve the row index and sheet instance, then use the getRange API to target the entire row and apply a background color using the backColor method.

  Please refer to the following snippet and sample: https://jscodemine.mescius.io/share/I6zjIlDAVEqhXZJqXLumug/?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"%2Fpackage.json"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  spread.bind(GC.Spread.Sheets.Events.ValueChanged, (e, info) => {
      info.sheet.getRange(info.row, -1, 1, -1).backColor("#f7cb52");
      info.sheet.getCell(info.row, 0, GC.Spread.Sheets.SheetArea.rowHeader).backColor("#f7cb52");
  });

  References:

  • ValueChanged: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Events#valuechanged
  • getRange: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#getrange
  • getCell: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#getcell

  Regards,
  
  Priyam