Row and Column Headers hover color

Row and Column Headers hover color

Posted by: adisa.craig on 24 October 2019, 11:51 am EST

• 

  adisa.craig

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 24 October 2019, 11:51 am EST

  Is it possible to set the row/column headers hover color through code? When I update the backColor, I would also like to update the hover color as well.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 25 October 2019, 8:09 am EST

  Hi Adisa,

  In the current version of SpreadJS, cell hover color is not supported. However, it will be available in the v13 release along with other cell states formatting options such as edit, read-only, invalid.
  
  Till then you may implement it at your end by using tags to store hover color info and override the paint method to display the color. Plese refer to the following sample which demonstrates the same:
  
  https://codesandbox.io/s/spread-js-starter-k58op

  Regards
  
  Sharad

• 

  adisa.craig

  • Post Options:
  • Link
    Copy

  Posted 25 October 2019, 4:01 pm EST

  In your sample, can you show how you apply the hover to a column or row header, I tried setting it using the following code but it didn’t seem to work

  sheet.setTag(0, 2, { hoverColor: "pink" },GC.Spread.Sheets.SheetArea.colHeader)
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 October 2019, 4:27 am EST

  For updating header hover color, you could override the following CSS rules:

  .gc-columnHeader-hover {
    background-color: tomato;
  }
  
  .gc-rowHeader-hover {
    background-color: tomato;
  }
  

  Updated sample: https://codesandbox.io/s/spread-js-starter-jfchg

  Further, you could update header styles by using the following CSS classes:
  
  • .gc-columnHeader-hover/.gc-rowHeader-hover: style applied on header cell when hovering the mouse over the header cell
  
  • .gc-columnHeader-selected/.gc-rowHeader-selected: style applied on header cell when whole column is selected by clicking on the header
  
  • .gc-columnHeader-highlight/.gc-rowHeader-highlight: style for header cell when one or more cells of the column/row are selected
  
  • .gc-columnHeader-normal/.gc-rowHeader-normal: style for header cell in normal state