How can i change background color of cell headers when it is active

How can i change background color of cell headers when it is active

Posted by: ngocnguyen09910060 on 8 May 2022, 1:33 pm EST

• 

  ngocnguyen09910060

  • Post Options:
  • Link
    Copy

  Posted 8 May 2022, 1:33 pm EST

  Hi teams,

  On my web application, i have 3 cells. I designed background color when load page:

  • “First cell have background color: red”

  • “Second cell have background color: blue”

  • “Third cell have background color: green”

  When i select a row, background color of all cell headers are light grey.
  
  I want to keep background color same as background color when load page (red/blue/green).

  Please help me.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 9 May 2022, 5:19 am EST

  Hi =,

  For this, you need to override the following cssclasses.

  .gc-columnHeader-hover {
    color: #444444;
    background-image: none;
    background-color: #9fd5b7;
    border-style: solid;
    border-left-color: #efefef !important;
    border-right-color: #d5ded5 !important;
    border-bottom-color: #ababab !important;
  }
  
  /* fwhen we click on the column header*/
  .gc-columnHeader-selected {
    color: #ebc858;
    background-color: #e72113;
    background-image: none;
    border-style: solid;
    border-left-color: #efefef !important;
    border-right-color: #d5ded5 !important;
    border-bottom-color: #ababab !important;
  }
  
  .gc-columnHeader-highlight {
    color: #217346;
    background-image: none;
    background-color: #c72d2d;
    border-style: solid;
    border-left-color: #efefef !important;
    border-right-color: #d5ded5 !important;
    border-bottom-color: #ababab !important;
  }
  
  /* normal state */
  .gc-columnHeader-normal {
    color: #444444;
    background-image: none;
    background-color: rgb(231, 140, 87);
    border-style: solid;
    border-left-color: #efefef !important;
    border-right-color: #d5ded5 !important;
    border-bottom-color: #ababab !important;
  }
  

  Regards,
  
  Avinash

• 

  ngocnguyen09910060

  • Post Options:
  • Link
    Copy

  Posted 9 May 2022, 6:30 am EST

  Hi avinash.pathak,
  
  I have tried to use ```
  
  gc-columnHeader-highlight

  But this css class make all cells have same background color.
  When user select a row, i want to keep background color:
  * "First cell have background color: red"
  
  * "Second cell have background color: blue"
  
  * "Third cell have background color: green"
  
  Please help me.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 10 May 2022, 3:14 am EST

  Hi,

  We are sorry but currently there is no -public API to achieve the functionality but we have escalated this issue to the concerned team for further investigation. we will update you once we get any information from the team. The internal ID for this issue will be SJS-12971.

  Regards,
  
  Avinash

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 13 May 2022, 2:32 am EST

  Hi,

  For this, you need to override the paint .method. Please refer to the following code snippet attached sample att explains the same.

  var old = GC.Spread.Sheets.CellTypes.ColumnHeader.prototype.paint;
  GC.Spread.Sheets.CellTypes.ColumnHeader.prototype.paint = function (
    ctx,
    value,
    x,
    y,
    w,
    h,
    style,
    context
  ) {
    if (context.col < 3) {
      context.visualState = GC.Spread.Sheets.VisualState.normal;
    }
    old.apply(this, arguments);
  };
  
  

  sample: https://codesandbox.io/s/spread-js-starter-forked-tl1hjh?file=/src/index.js
  
  Regards,
  
  Avinash