Hi there,
We are using Kendo Grid with our Angular 10 website and are grouping our header columns using the <kendo-grid-column-group> element. I would love to get your guidance for how to set the kendo-grid-column-group headerStyle attribute from a separate .scss file rather than embedded in the .html file itself.
We have the styling we want specified using the following logic in our html file:
<kendo-grid-column-group
title="My column header"
[locked]="false"
[headerStyle]="{'background-color': '#e0e0e0', 'text-align': 'center' ,'color': '#000000','line-height': '1em'}">
The above logic works great. THE PROBLEM: we want to move the header styling into a global .scss file so that any future grouped headers will by default have this styling. Unfortunately, when the styling is replaced with a class from our .scss file (even the local component .scss file), it doesn't register the styling anymore.
For example, the logic below doesn't add in the styling in my html:
<kendo-grid-column-group title="My column header" [locked]="false" [headerStyle]="{'groupedColumnsStyle': true}">
with the corresponding styling in the .scss file:
.groupedColumnsStyle{
background-color: #e0e0e0 !important;
text-align: center !important;
color: #000000 !important;
line-height: 1em !important;
}
I have done all the obvious checks:
In the local component .scss file, it imports correctly, and styles from other elements on the same html page can be updated. I also tried to just use the [headerClass] but I was unable to update the styling using the above methods either. However, I cannot figure out how to use a class to reference styling for the grouped header column. Any guidance you provide would be greatly appreciated!
Thx!