Change background color of selected row in Angular using kendo-grid

I want to change the background color of the row in my kendo-grid whenever I select it. Currently, my HTML code looks something like this:

<kendo-grid id="kendoGridId"
[kendoGridBinding]="something"
[loading]="loading"
[selectedKeys]="selectedKeys"
[selectable]="true"
[height]="124"
[resizable]="true"
[sortable]="true"
(cellClick)="onSelect($event)"
kendoGridSelectBy="id">
...


The code works, I select a row using cellClick. However, the row turns light blue whenever I select it but I want it to be transparant.

I have already turned off my encapsulation by adding encapsulation: ViewEncapsulation.None to my .ts file. According to google, something like :

:host ng-deep .k-state-selected {
background-color: red !important;
}


should work, but it doesnt. Also tried using without :host and ::ng-deep, but that also does not work. Also tried adding it to the global .scss file, still nothing. Anyone have any idea? When trying to change the background color when hovering over the row, this did work :

.k-grid tr:hover {
background-color: white; /* Change this to your desired color */
}```

so I am curious why it does not work for selecting rows.

Continue reading...