IgbGrid における、セルの値に応じて他の同一行のセルの色を変更する方法についてご紹介します。
IgbGrid の設定
IgbGrid の RowClassesScript プロパティと IgbColumn の CellClassesScript プロパティより任意のクラスを適用することができます。
<IgbGrid ....
RowClassesScript="RowClassesHandler">
<IgbColumn ....
Field="@nameof(SupportTicket.Name)"
Header="顧客名"
CellClassesScript="CellClassesHandler1"></IgbColumn>
<IgbColumn ....
Field="@nameof(SupportTicket.Inquiries )"
Header="お問い合わせ"
CellClassesScript="CellClassesHandler2"></IgbColumn>
<IgbColumn ....
Field="@nameof(SupportTicket.Status)"
Header="ステータス"></IgbColumn>
</IgbGrid>
Script の使用
RowClassesScript と CellClassesScript のスクリプトは、行またはセルに条件付きでクラスを適用するために使用されます。以下は、それぞれのスクリプトの定義例です。
- CellClassesHandler1
顧客名列に対する条件付きクラスを設定します。ここでは、”name” というクラスが顧客名列のすべてのセルに適用されます。 - CellClassesHandler2
お問い合わせ列に対する条件付きクラスを設定します。ここでは、”inquiries” というクラスが顧客名列のすべてのセルに適用されます。 - RowClassesHandler
ステータス列に対する条件付きクラスを設定します。
open クラスはステータスが「オープン」のとき、inProgress クラスはステータスが「進行中」のとき、closed クラスはステータスが「完了」のとき適用されます。
/* "顧客名"列の条件付きクラスを設定 */
igRegisterScript("CellClassesHandler1", () => {
return {
name: (rowData, columnKey, cellValue, rowIndex) => true
};
}, true);
/* "お問い合わせ"列の条件付きクラスを設定 */
igRegisterScript("CellClassesHandler2", () => {
return {
inquiries: (rowData, columnKey, cellValue, rowIndex) => true };
}, true);
/* 行全体に"ステータス"列の値からクラスを設定 */
igRegisterScript("RowClassesHandler", () => {
return {
open: (row) => {
return row.data.Status == "オープン";
},
inProgress: (row) => {
return row.data.Status == "進行中";
},
closed: (row) => {
return row.data.Status == "完了";
}
};
}, true);
スタイルの定義
最後に、適用されたクラスに対するスタイルを定義します。これにより、特定の条件下でセルの表示方法をカスタマイズできます。
/*ステータスが"オープン"のとき*/
.open .name,
.open .inquiries {
color: green;
background-color: lightgreen;
font-weight: bold;
}
/*ステータスが"進行中"のとき*/
.inProgress .name,
.inProgress .inquiries {
color: red;
background-color: yellow;
font-weight: bold;
}
/*ステータスが"完了"のとき*/
.closed .name,
.closed .inquiries {
color: black;
background-color: lightgray;
font-weight: bold;
}
実行結果
このような方法で、「ステータス」列の値からクラスを適用した行およびセルの実行結果はこちらのようになります。
