文章分類/

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

0 次瀏覽
2023-04-14 更新

infragistics log

讓我們根據 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";
    }
}

快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊