Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ghost opened this issue Oct 7, 2016 · 7 comments

Comments

@ghost
Copy link

ghost commented Oct 7, 2016

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

@rkonstantinov
Copy link

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>
    `
})

@ghost
Copy link
Author

ghost commented Oct 10, 2016

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

@rkonstantinov
Copy link

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.

@ghost
Copy link
Author

ghost commented Oct 10, 2016

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

@petyosi
Copy link
Contributor

petyosi commented Oct 10, 2016

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

@ghost
Copy link
Author

ghost commented Oct 10, 2016

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

@pravinsawant
Copy link

pravinsawant commented Jul 15, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants