How to change color of selected row in kendo grid in angular

Question

Hi i am loading the kendo grid dynamically on bootstrap modal popup i am defining the class in .css file of that particular component in angular but still color is not getting applied still shows red color for selected rows.

following is the code for kendo grid

    <div class="row">
    <kendo-grid [data]="previewGridSource" [selectable]="selectableSettings" 
    [rowClass]="rowCallback" [kendoGridSelectBy]="selectedCallback"
              [selectedKeys]="mySelection">
    <kendo-grid-checkbox-column title="Select" width="70"></kendo-grid-checkbox- 
     column>
    <kendo-grid-column field="BookingDetailId" title="BookingDetailId" 
     width="40" hidden="hidden">
    </kendo-grid-column>
    </kendo-grid-column>
    <kendo-grid-column field="Hours" title="Hours" width="80">
    </kendo-grid-column>
    <kendo-grid-column field="Loading" title="Loading" width="100" 
    [format]="format">
    </kendo-grid-column>
    <kendo-grid-column field="StartDate" title="Start Date" width="100" format=" 
    {0: dd-MM-yyyy}">
    </kendo-grid-column>
    <kendo-grid-column field="EndDate" title="End Date" width="100" format="{0: 
    dd-MM-yyyy}">
    </kendo-grid-column>
    <kendo-grid-column field="Unconfirmed" title="Unconfirmed" width="120">
    </kendo-grid-column>
    <!-- <kendo-grid-column title="Done" width="100" >
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          <input type="checkbox" name="checkBoxDone" checked>
      </ng-template>
    </kendo-grid-column> -->
  </kendo-grid>

   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 pr-0">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <button class="cancelBtn" (click)="cancel()"><span class="glyphicon 
   glyphicon-remove-sign pr-5"></span>Cancel</button>
    </div>
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <!--button class="deleteBtn" (click)="save()"><span class="glyphicon 
       glyphicon-ok-sign pr-5"></span>Submit</button-->
       <button class="addBtn" (click)="save()"><span class="glyphicon glyphicon- 
    ok-sign pr-5"></span>Submit</button>
    </div>
   </div>
   </div>

following is the code in css file

.k-grid .k-state-selected {
background-color:lightgreen;
}

Even after applying the background color i am getting the selected rows in red background.

Answer 1

I was able to get it to work using the following:

::ng-deep .k-grid tr.k-state-selected > td {
    background-color: rgba(3, 155, 229, 0.25);
}