IgbGrid における、ヘッダーとセルに特定のクラスを適用する方法についてご紹介します。
IgbGrid の設定
IgbColumn の HeaderClasses プロパティより任意のクラスをそのまま適用することができます。
<IgbGrid ....>
<IgbColumn Field="@nameof(Person.Name)"
Header="氏名"
HeaderClasses="name-header"
CellClassesScript="CellClassesHandler1"></IgbColumn>
<IgbColumn Field="@nameof(Person.Age)"
Header="年齢"
DataType="GridColumnDataType.Number"
HeaderClasses="age-header"
CellClassesScript="CellClassesHandler2"></IgbColumn>
<IgbColumn Field="@nameof(Person.JobTitle)"
Header="職種"
HeaderClasses="job-header"
CellClassesScript="CellClassesHandler3"></IgbColumn>
</IgbGrid>
CellClassesScript の使用
このスクリプトは、セルに条件付きでクラスを適用するために使用されます。例としてそれぞれのスクリプトの定義は以下のようにしております。
- CellClassesHandler1
氏名列に対する条件付きクラスを設定します。person クラスは、セルのデータが “Bob” である場合にクラスが適用されます - CellClassesHandler2
年齢列に対する条件付きクラスを設定します。upFont と downFont の2つのクラスが定義されており、upFont クラスは、セルのデータが 35 以上の場合に適用され、downFont クラスは 35 未満の場合に適用されます - CellClassesHandler3
職業列に対する条件付きクラスを設定します。ここでは、”job-title-cell”というクラスがすべてのセルに適用されます
/*氏名 列の条件付きクラスを設定*/
igRegisterScript("CellClassesHandler1", function () {
return {
person: (rowData, columnKey) => rowData[columnKey] === "Bob",
};
}, true);
/*年齢 列の条件付きクラスを設定*/
igRegisterScript("CellClassesHandler2", () => {
return {
upFont: (rowData, columnKey) => rowData[columnKey] >= 35,
downFont: (rowData, columnKey) => rowData[columnKey] < 35
};
}, true);
/*職業 列の条件付きクラスを設定*/
igRegisterScript("CellClassesHandler3", function () {
return {
"job-title-cell": (rowData, columnKey, cellValue, rowIndex) => true
};
}, true);
スタイルの定義
最後に、適用されたクラスに対するスタイルを定義します。これによりヘッダーおよび、特定の条件下でセルが表示される方法をカスタマイズできます。
/*氏名 列のスタイル設定*/
::deep .person:hover {
background-color: lightpink;
}
::deep .person {
background-color: hotpink;
}
/*年齢 列のスタイル設定*/
::deep .upFont {
color: green;
font-weight: bold;
}
::deep .downFont {
color: red;
font-weight: bold;
}
/*職業 列のスタイル設定*/
::deep .job-title-cell:hover {
background-color: lightgreen;
}
::deep .job-header,
::deep .job-title-cell {
background-color: limegreen;
}
実行結果
このような方法で、条件付きクラスを適用したヘッダーおよびセルの実行結果はこちらのようになります。
