Kendo Grid Angular - Styles not working

[Akarsh]

Am not able to change the style for kendo grid,  Even i written script in component.scss, still not working. Weird ! Why so?

Once i changed to  encapsulation: ViewEncapsulation.None, its started working , whats the logic behind that?

 

Thanks....

[Dimiter Topalov]

Hi Akarsh,

This is the default Angular behavior to help encapsulate component styling. The idea is that each component is a separate standalone unit, and its styling and logic should not affect other components (unless specifically configured so by the developer):

https://angular.io/guide/component-styles

https://angular.io/guide/component-styles#style-scope

https://angular.io/guide/component-styles#view-encapsulation

To customize the styling of nested Angular components used in the host component's template (including the Kendo UI for Angular components), the custom styling should be either provided at a global level (for example in the application's styles.css file), or the ViewEncapsulation of the host component should be set to None.

Here is an example demonstrating overwriting the Grid colors with CSS rules, declared in the index.html file (without setting the ViewEncapsulation to None):

https://stackblitz.com/edit/angular-mhxas7?file=index.html

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Akarsh]

Hey thanks, Now i got the clear picture..