IgcDataGridでセルの値に応じてセルの色、フォント、文字サイズを変えてみましょう。完成イメージはこんな感じになります。

方法

列にデータがバインドされると列のdataBoundイベントが発生します。そのdataBoundイベントを使って、在庫数が20未満かどうか判定し、20未満であればcellInfoのbackgroundとfontを設定してください。

<!-- 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側(src\DataGridOverview.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のfont設定と同じです。
        args.cellInfo.font = "20px Verdana";
    }
}

 

サンプル

 

リファレンス

 

 

Tagged:

製品について

Ignite UI for Web Components