igGrid セルの値に応じて行全体の色を変える

igGridでセルの値に応じて行全体の色を変えてみましょう。完成イメージはこんな感じになります。

　

方法は2つあります。

• 方法1: columnsのtemplateを使ってCSSクラスを追加する。
• 方法2: rowsRenderedイベントでCSSクラスを追加する。

　

---

　

方法1: columnsのtemplateを使ってCSSクラスを追加する

テンプレートエンジンを使って在庫数が20未満かどうか判定し、20未満であれば背景色をピンク色にするCSSをTDに対して追加します。

テンプレートエンジンを設定する場所は、columnsのtemplateオプションです。

下のコードスニペットでは、12行目、16行目、20行目が実装箇所です。

<style>
    #grid1 > tbody > tr > td.myStyle {
        background-color: pink;
    }
</style>
...
$("#grid1").igGrid({
    ...
    columns: [
        {
            headerText: "製品ID", key: "ProductId", dataType: "number",
            template: "<td {{if ${StockedAmount} < 20}} class='myStyle' {{/if}}>${ProductId}</td>"
        },
        {
            headerText: "製品名", key: "ProductName", dataType: "string",
            template: "<td {{if ${StockedAmount} < 20}} class='myStyle' {{/if}}>${ProductName}</td>"
        },
        {
            headerText: "在庫数", key: "StockedAmount", dataType: "number",
            template: "<td {{if ${StockedAmount} < 20}} class='myStyle' {{/if}}>${StockedAmount}</td>"
        },
    ],
    ...
});

　

方法1のサンプル

　

方法1のリファレンス

テンプレート エンジンの概要
https://jp.igniteui.com/help/igtemplating-overview

columnsのtemplateオプション
https://jp.igniteui.com/help/api/2019.1/ui.iggrid#options:columns.template

　

---

　

方法2: rowsRenderedイベントでCSSクラスを追加する

行が描画されたタイミングで発生するrowsRenderedイベントのイベントハンドラーで、

1. 描画された行のコレクションを取り出し（下のコードスニペットでは13行目。以下同様）、
2. 各行に紐づいた要素からバインドされているデータを取り出し（22～28行目）、
3. 在庫数が20未満かどうか判定し（33行目）、
4. 20未満であれば背景色をピンク色にするCSSをTDに対して追加します（35行目）。

<style>
    #grid1 > tbody > tr > td.myStyle {
        background-color: pink;
    }
</style>
...
$("#grid1").igGrid({
    ...
    // rowsRenderedイベントのイベントハンドラー
    rowsRendered: function(evt, ui){

        // 描画されたTR要素を取り出す
        var rowTrs = ui.owner.rows();

        // 各TR要素について
        $.each(rowTrs, function (index, item) {

            // itemの存在チェック
            if(item !== undefined && item !== null){

                // TR要素に紐づいた要素の情報を取り出す
                var elementInfo = ui.owner.getElementInfo(item);

                // TR要素に紐づいた要素の情報を取り出せたら
                if(elementInfo !== undefined && elementInfo !== null){

                    // 行IDからバインドされているデータを取り出す
                    var record = ui.owner.findRecordByKey(elementInfo.rowId);

                    // 行IDからバインドされているデータを取り出せたら
                    if(record !== undefined && record !== null){
                        // 「StockedAmount」の値が20未満なら
                        if (record.StockedAmount < 20) {
                            // 背景色をピンクにするclassを当てる
                            $(item).find("td").addClass("myStyle");
                        }
                    }
                }
            }
        });
    }
    ...
})

　

方法2のサンプル

　

方法2のリファレンス

rowsRenderedイベント
https://jp.igniteui.com/help/api/2019.1/ui.iggrid#events:rowsRendered

getElementInfoメソッド
https://jp.igniteui.com/help/api/2019.1/ui.iggrid#methods:getElementInfo

findRecordByKeyメソッド
https://jp.igniteui.com/help/api/2019.1/ui.iggrid#methods:findRecordByKey