根據角度日期列值更改劍道網格中行的顏色

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 周，如何在 kendogrid 中為整行（或記錄）着色，並在發票編號列上顯示警報圖像/符號以及發票編號

謝謝。

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