IgbGrid – CellClasses を使ってセルに CSS クラスを適用する方法

IgbColumn の CellClasses に、LocalJson.From() でラップした JSON 文字列を渡すことで、セルに CSS クラスを一括適用できます。

<IgbGrid .....>
	<IgbColumn Field="TestName" CellClasses="@LocalJson.From("""{"highlight-cell":true,"bold-text":true}""")" />
</IgbGrid>

.highlight-cell {
    background-color: lightyellow;
}
.bold-text {
    font-weight: bold;
}

LocalJson.From() とは
LocalJson.From(string)は、JSON 文字列を LocalJson オブジェクトにラップするための Ignite UI for Blazor が提供するユーティリティメソッドです。CellClasses をはじめとするコンポーネントパラメーターに JSON データを渡す際に使用します。渡された JSON 文字列はブラウザ側で JSON.parse されてオブジェクトとして処理されます。そのため、コールバック関数は指定できません。{“クラス名”: true} の形式で固定クラスを並べる使い方のみ有効です。条件分岐を伴うクラス適用が必要な場合は CellClassesScript をご利用ください。詳細は「IgbGrid セルの値に応じてセルの色を変える」をご参照ください。