Search code examples
cssangularkendo-uitelerikangular11

Angular Kendo Grid: Background Color of Selected Row

How do I change the background color of Kendo Angular Grid row that is Selected? The following is not making the background color blue. Trying to figure out what is overriding it.

.k-grid .k-state-selected  {
  background-color: blue !important;
  color: green;
}
 
.k-grid .k-alt.k-state-selected {
  background-color: blue !important;
  color: green;
}

enter image description here

Resources: https://www.telerik.com/forums/changing-color-of-selected-row

Solution

  • Your styling doesn't affect the grid due to view encapsulation. You can read more about it here.

    To force the use of your custom styling into a child component that has view encapsulation, which is set to Emulated by default for all components, add ::ng-deep before the CSS selector, like this:

    :host ::ng-deep .k-grid .k-state-selected  {
    background-color: blue !important;
    color: green;
}
  
:host ::ng-deep .k-grid .k-alt.k-state-selected {
    background-color: blue !important;
    color: green;
}

    Since ::ng-deep convert the styling into a global rule, you need to add :host before it so that it will affect only the current component and its children.

    Note that ::ng-deep is deprecated and technically shouldn't be used. A replacement is planned and ::ng-deep will probably be around until they come up with something else.

    You can read more about ::ng-deep here.