Apply style to column header not working without ng-deep in Angular

Apply style to column header not working without ng-deep in Angular

Posted by: jekin.desai on 15 December 2020, 1:04 am EST

• 

  jekin.desai

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 December 2020, 1:04 am EST

  I am using SpreadJS v13.2.3 in Angular v10 app
  
  I want to apply below spreadJS column header css style but i doesn’t work until i add ng-deep , which i don’t want to use since it is deprecated nor i want to set component ViewEncapsulation to none. Is there any other way i can apply below css to spreadsheet.

  .gc-columnHeader-normal,
  .gc-columnHeader-hover,
  .gc-columnHeader-selected,
  .gc-columnHeader-highlight {
    background-color: blue;
    font: bold;
    color: white;
  }
  

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 15 December 2020, 10:54 pm EST

  Hi Jekin,

  We are able to replicate the issue at our end hence we have forwarded it to the concerned team for further investigation. We will update you regarding this issue as soon as we get the information. The internal ID for this issue will be SJS-6920.

  Regards
  
  Avinash

• 

  jekin.desai

  • Post Options:
  • Link
    Copy

  Posted 16 December 2020, 12:12 am EST

  Is there any workaround to handle the issue. Like

  var row = sheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.colHeader);
      row.backColor("Red");
      row.foreColor("White");
  

  Works normally but doesn’t work during hover or column selection or highlighted.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 16 December 2020, 11:10 pm EST

  Hi Jekin,

  You may override the COlumnHeader.paint method for the required functionality. Please refer to the following code snippet and attached sample that demonstrates 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
  ) {
    //for hover and highlight
    if (
      context.visualState === GC.Spread.Sheets.VisualState.hover ||
      context.visualState === GC.Spread.Sheets.VisualState.highlight
    ) {
      style.foreColor = "red";
      style.font = "14.6667px Arial";
    }
    style.backColor = "blue";
    old.apply(this, arguments);
  };
  
  

  sample: https://codesandbox.io/s/elated-dhawan-lye2e?file=/src/index.js

  Regards
  
  Avinash

• 

  jekin.desai

  • Post Options:
  • Link
    Copy

  Posted 16 December 2020, 11:59 pm EST

  On column header hover or column select or if row is selected then i want to keep column header backColor as blue which is not working as expected. And can you provide example which can be implemented using typescript

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 17 December 2020, 11:40 pm EST

  HI Jekin,

  You may use CSS classes for the required functionality. Further, If you do not want to use ng-deep then as a workaround, for now, you may place the CSS to style.css file. Please refer to the attached sample that demonstrates the same and let us know if you face any issues

  sample: https://codesandbox.io/s/practical-minsky-r62kd?file=/src/styles.css

  Regards
  
  Avinash

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 4 January 2021, 10:59 pm EST

  Hi Jekin,

  The Devs Informed us that this feature is by design. Please let us know if you have any further queries.

  Regards
  
  Avinash