Изменить цвет строки в сетке кендо на основе значения столбца даты в angular

Question

У меня есть сетка кендо, подобная этой

<kendo-grid
  [data]="gridData"
  [selectable]="false"
  [kendoGridSelectBy]="'Id'"
  [selectedKeys]="selectedIds"
  [pageable]="{ pageSizes: gridPageSizes }"
  [pageSize]="state.take"
  [skip]="state.skip"
  [scrollable]="'none'"
  [groupable]="false"
  [group]="state.group"
  (dataStateChange)="dataStateChange($event)"
  [filterable]="false"
  [filter]="state?.filter"
  [sortable]="true"
  [sort]="state?.sort"
  [rowClass]="rowCallBack"
>
<kendo-grid-column
    field="invoiceNumber"
    title="Invoice Number"
  >
  </kendo-grid-column>
 <kendo-grid-column
    title="PO"
  >
    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
      {{dataItem.PO}}
    </ng-template>
  </kendo-grid-column>

 <kendo-grid-column
    field="StatusChangedDate"
    title="StatusChangedDate"
    filter="date"
    format="{0:d}"
  >
    <ng-template kendoGridCellTemplate let-dataItem>
      <time>{{ dataItem.StatusChangedDate | l10nDate: language:'short' }}</time>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

Как я могу раскрасить всю строку (или запись) в кендогрид, если StatusChangedDate на 1 неделю старше и показать изображение / символ оповещения в столбце с номером счета-фактуры вместе с номером счета-фактуры

Спасибо.

Answer 1

Функция обратного вызова уже привязана к свойству [rowClass]. Мы можем использовать его, чтобы проверить, прошла ли одна неделя с даты StatusChangedDate, и установить собственный цвет фона.

Также обратите внимание на параметр encapsulation в компонентном декораторе. ViewEncapsulation.None указывает Angular использовать глобальный CSS без инкапсуляции. Наконец в CSS highlight добавляется селектор к сетке Kendo CSS селектор .k-grid tr для установки цвета фона.

Следующее должно сделать это

import { Component, ViewEncapsulation } from '@angular/core';
import { RowClassArgs } from '@progress/kendo-angular-grid';

import { sampleData } from './data';

@Component({
    selector: 'my-app',
    encapsulation: ViewEncapsulation.None,
    styles: [
      `
      .k-grid tr.highlight {
        background-color: #ff6666;
      }
      `
    ],
    template: 
      `
      <kendo-grid id="grid"
        [data]="gridData" 
        [resizable]="true"
        [rowClass]="rowCallBack"
        [selectable]="false"
        [kendoGridSelectBy]="'Id'"
        [pageable]="{ pageSizes: gridPageSizes }"
        [pageSize]="20"
        [skip]="true"
        [scrollable]="'none'"
        [groupable]="false"
        [filterable]="false"
        [sortable]="true">

        <kendo-grid-column field="invoiceNumber" title="Invoice" width="40">
        </kendo-grid-column>
        <kendo-grid-column title="PO" width="80">
          <ng-template kendoGridCellTemplate let-dataItem="dataItem">
            {{dataItem.PO}}
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column
          field="StatusChangedDate"
          title="StatusChangedDate"
          filter="date"
          format="{0:d}"
          width="80">
          <ng-template kendoGridCellTemplate let-dataItem>
            <time>{{ dataItem.StatusChangedDate | date: 'dd/MM/yyyy' }}</time>
          </ng-template>
        </kendo-grid-column>

      </kendo-grid>
      `
})
export class AppComponent {
  public gridData: any[] = sampleData;

  public rowCallBack(context: RowClassArgs) {
    const utcOld = Date.parse(context.dataItem.StatusChangedDate);
    const utcNow = new Date().getTime();
    if ((Math.abs(utcNow - utcOld)) > 604800000) {  // 604800000 = 1 week in microseconds
      return { highlight: true };
    }
  }
}

Работа Например: Stackblitz