Kendo-angular: Kendo for Angular 2: Grid styling using headerClass, class or footerClass do not work

Created on 7 Oct 2016  路  7Comments  路  Source: telerik/kendo-angular

Kendo for Angular 2: Grid styling using headerClass, class or footerClass do not work.
The documentation example for Styling uses headerStyle, style, footerStyle and seems to work.
http://www.telerik.com/kendo-angular-ui/components/grid/

But if I switch the example to use headerClass, class, or footerClass, the styles do not apply.
kendo1

See plunker example: http://plnkr.co/edit/Vy8ztuercRsR4ESXbCPU?p=preview

kendo2

Most helpful comment

Plunkr you have posted works for me, unless I am missing something.
screen shot 2016-10-10 at 7 03 59 pm

All 7 comments

The headerClass is not applied due to few configuration errors in the sample:

  • as the class name is a string it should be enclosed in quotes
  • the component styles should be defined via the styles(plural) property. In the sample the style(singular) is used instead.
  • the appropriate encapsulation should be set to the parent component.
@Component({
    selector: 'my-app',
    styles: ['/*..*/'],
    encapsulation: ViewEncapsulation.None,
    template: ` 
        <kendo-grid [data]="gridData">
            <kendo-grid-column
                 field="ProductName"
                 [headerClass]="'test'">
            </kendo-grid-column>
        </kendo-grid>
    `
})

I made the updates you listed to the plunker example, but the styles are still not being applied.
http://plnkr.co/edit/Vy8ztuercRsR4ESXbCPU?p=preview

kendo3

You should increase the specificity of the CSS selector you are using in order to override the existing styling. For example adding an !important just for the test.

I added important to test but still do not see the styling. When I run the debugger on plunker I don't even see the test styles in the stack of styles to apply.
http://plnkr.co/edit/Vy8ztuercRsR4ESXbCPU?p=preview

kendo4

Plunkr you have posted works for me, unless I am missing something.
screen shot 2016-10-10 at 7 03 59 pm

You're right. I had to stop and rerun plunker and now it does work.
Thank you all for your help.

Thank you so much i was really looking for this. You saved my further time. Thanks buddy.

Was this page helpful?
0 / 5 - 0 ratings