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";     } }