Блог

Привет, я динамически загружаю kendo grid в bootstrap modal popup, я определяю класс в файле .css этого конкретного компонента в angular, но цвет по-прежнему не применяется, по-прежнему отображается красный цвет для выбранных строк, который по умолчанию.

ниже приведен код для 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>
  

ниже приведен код в файле css

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

Я предлагаю использовать следующие классы css.

 /*for selected row color*/
.k-grid td.k-state-selected, .k-grid tr.k-state-selected>td 
{
   background-color:lightgreen;
}

/*for hover row color*/
.k-grid tbody tr:hover, .k-grid tbody tr.k-state-hover
{
   background-color:lightblue;
}