CODEWITHSUNDEEP
cssangularkendo-uitelerikangular11
mattsmith5
mattsmith5

Reputation: 1153

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

Upvotes: 0

Views: 2415

Answers (1)

Shai
Shai

Reputation: 3882

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.

Upvotes: 1

Related Questions