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

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

  • 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;
    }

  • Replied 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
  • Replied 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.
  • Replied 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

  • Replied 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
  • Replied 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
  • Marked as Answer

    Replied 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

Need extra support?

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

Learn More

Forum Channels