Infragistics｜Ultimate UI Web Components｜如何根據 IgcDataGrid 單元格值更改單元格顏色、字體和文本大小

讓我們根據 IgcDataGrid 中的單元格值更改單元格顏色、字體和文本大小。完成的圖像將如下所示。

執行方式:

當數據綁定到列時，列的 dataBound 事件會觸發。使用那個dataBound事件判斷庫存數量是否小於20，小於20則設置cellInfo的背景和字體。

<!-- html側(index.html) -->

<igc-data-grid

  auto-generate-columns="false">

  <!-- (中略) -->

  <igc-numeric-column id="stockedAmountColumn" field="StockedAmount" header-text="在庫数"></igc-numeric-column>

  <!-- (中略) -->

</igc-data-grid>

// Typescript側(srcDataGridOverview.ts)
// 獲取庫存數量列的元素。
let stockedAmountColumn = document.getElementById("stockedAmountColumn") as IgcNumericColumnComponent;
// 為 dataBound 事件定義一個事件處理器
stockedAmountColumn.dataBound = function (sender: any, args: IgcDataBindingEventArgs) {
    // 如果庫存數量小於 20
    if (args.cellInfo.rowItem.StockedAmount < 20) {
        // 使單元格顏色為粉紅色
        args.cellInfo.background = "pink";
        // 將字體設置為 20px，Verdana。描述語法與 CSS 字體設置相同。
        args.cellInfo.font = "20px Verdana";
    }
}