Formatting cell in Grid is not working in Angular 13

[Roland]

Hi,

I have the problem that my component styles are not assigned to the kendo grid column.

Component Html-Snippet:
<kendo-grid-column field="displayname" title="DisplayName"  [class]="'isTrainedColumn'"> </kendo-grid-column>

Component SCSS-Style Snippet:
.isTrainedColumn {
    text-align: right;
    background-color: red;
}

Generated HTML-Code:

<style>
.isTrainedColumn[_ngcontent-ndt-c454] {
  text-align: right;
  background-color: red;
}
</style>

Selector is only set at grid level and template level
<kendo-grid _ngcontent-ndt-c454="" ...>

But missing on the TD-Tag

Is this an issue or a missconfiguration on my side?

[Silviya]

Hello Roland,

Thank you for the code snippets.

I tried reproducing the reported issue by creating a small, runnable project with Angular 13. The Grid package version in it is 5.5.0.

However, in the test demo the styles were applied to the column. I am sending a screenshot where the td element has been inspected and the `isTrainedColumn` class is applied to it. Though, an `!important` rule was applied to the text-align property.

Also, I am attaching the zipped project. If I am missing something out or have misunderstood the question, please modify the files and send them back with the reproduced problem. Thank you.

I hope this proves helpful.

Regards,
Silviya
Progress Telerik

[Thomas]

Hi Silviya,

I have the same issue.

You worked around it by setting "encapsulation" to "ViewEncapsulation.none" meaning your css is not scoped to this component only, but working globally.

This is not a solution for me, since I want to have the css only being applied to the component and not "infect" my global css.

Seems like when the grid is rendered the angular attribute (_ngcontent) is not added to any element below <kendo-grid>. Wheraes it's added to the classes in the component css (e.g. .isTrainedColumn[_ngcontent-ndt-c454])

https://angular.io/guide/view-encapsulation

Any ideas how to apply css to children of the kendo-grid only for this component?

Thanks! 

[Martin Bechev]

Hi Thomas,

In order to apply specific styles to the column cells, the style property of the column could be used. This approach doesn't require ViewEncapsualtion.None:

 <kendo-grid-column
                field="ContactName"
                title="Contact Name"
                [style]="{ 'background-color': '#888', color: '#fff' }"
 >

https://stackblitz.com/edit/angular-4c1ghz?file=src%2Fapp%2Fapp.component.ts

Another option is to still use the class property, but have a more specific CSS selector:

            .my-grid .cellCustomClass {
                color: #fff;
                background-color: #888;
            }

https://stackblitz.com/edit/angular-4c1ghz-fyzvdn?file=src%2Fapp%2Fapp.component.ts,src%2Fstyles.css

The same class could be added in the global style.css file and remove the ViewEncapsulation.None fro the components where the Grid is being used.