This is a migrated thread and some comments may be shown as answers.

Passing a scss class to the headerStyle attribute?

2 Answers 610 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Carol
Top achievements
Rank 1
Carol asked on 04 Jan 2021, 06:50 AM

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!

 

 

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Martin
Telerik team
answered on 05 Jan 2021, 01:54 PM

Hi Carol,

Using the headerClass option is the right way to go when defining the styles in a custom class, rather than using an inline CSS:

@Component({
  selector: 'app-root',
  template: `
    <kendo-grid [data]="gridData">
      <kendo-grid-column-group
        title="Product Info"
        [headerClass]="{ myClass: true }"
      >
        <ng-template> Group Column </ng-template>
        <kendo-grid-column field="ProductID" title="Product ID" width="120">
        </kendo-grid-column>
        <kendo-grid-column field="ProductName" title="Product Name">
        </kendo-grid-column>
      </kendo-grid-column-group>

      <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
      </kendo-grid-column>
    </kendo-grid>
  `,
  styleUrls: ['./app.component.scss'],
})

 

app.component.scss file:

.myClass {
	background-color:  red;
}

A common pitfall is to forget to set Angular's ViewEncapsulation to None as otherwise the custom styles will not be applied unless they are provided at a global level:

...  
styleUrls: ['./app.component.scss'], encapsulation: ViewEncapsulation.None,

I hope this helps.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Carol
Top achievements
Rank 1
answered on 05 Jan 2021, 03:33 PM

Martin,

Thank you very much! I missed adding the encapsulation to the component and now everything works as expected.

Best,

Carol

Tags
Grid
Asked by
Carol
Top achievements
Rank 1
Answers by
Martin
Telerik team
Carol
Top achievements
Rank 1
Share this question
or