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

admin管理员组

文章数量:1287514

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.

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.

• angular
• typescript
• kendo-grid
• scss-lint

Share Improve this question Follow asked Feb 23 at 19:50 user29759359user29759359 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Try changing this : :host ng-deep .k-state-selected by this :host ::ng-deep .k-state-selected.

Another approach would be to put this CSS directly into the main styles file of your Angular project while being as precise as possible.

Ex: [app.class] [component.class] .k-state-selected { background-color: red !important; }

本文标签： typescriptChange background color of selected row in Angular using kendogridStack Overflow