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

Posted by: ngocnguyen09910060 on 8 May 2022, 4:33 am EST

  • Posted 8 May 2022, 4:33 am 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.

  • Posted 8 May 2022, 8:19 pm 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

  • Posted 8 May 2022, 9:30 pm 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.
  • Posted 9 May 2022, 6:14 pm 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

  • Posted 12 May 2022, 5:32 pm 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

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels