FlexGrid のセルを選択したときに行全体を強調表示する方法はいくつかあります。代表的なアプローチを順番にご紹介します。
1. SelectionMode を利用する方法
FlexGrid のプロパティ selectionMode を「行選択」に指定すると、セルをクリック（選択）した際に、その行がまるごと強調されるようになります。
たとえば、以下のように設定します。
<wj-flex-grid
items-source="yourData"
selection-mode="Row">
</wj-flex-grid>
これだけで、セルを選択しても行全体が選択状態となり、Wijmo 標準のスタイルでハイライトされます。
2. CSS によるカスタマイズ
Wijmo FlexGrid は「選択状態」に対して、wj-state-selected という CSS クラスを付与します。
そのため、選択時の色を独自に変更したい場合は、以下のように CSS を上書き（オーバーライド）します。
/* 選択状態のセル全てに対して色を変更 */
.wj-flexgrid .wj-state-selected {
background-color: #B6CDFF; /* お好みの色に変更 */
color: #000; /* 文字色の指定など */
}
ただしこの場合、セル単位で選択していると行全体ではなく「選択セルのみ」が着色されます。
行全体を常に強調したい場合は、先述の selectionMode="Row" を使うか、下記のように JavaScript／TypeScript で明示的に行全体にスタイルを適用する実装を行う必要があります。
3. itemFormatter で強調表示する方法
itemFormatter（または cellStyleFunction）を使って、選択中の行だけ背景色を塗る方法です。
行全体を強調表示したい場合は、以下のように実装します。
// FlexGrid のインスタンスを生成
const grid = new wijmo.grid.FlexGrid('#theGrid', {
itemsSource: yourData,
// ...
itemFormatter: (panel, r, c, cell) => {
// セルがデータの表示領域 (CellType.Cell) の場合のみ
if (panel.cellType === wijmo.grid.CellType.Cell) {
// 現在選択されている行かどうかをチェック
if (r === grid.selection.row) {
cell.style.backgroundColor = '#B6CDFF'; // お好みの色
} else {
cell.style.backgroundColor = '';
}
}
}
});
この場合、個々のセル描画時に「このセルが選択中の行に属するか？」をチェックし、該当する場合は背景色をセットしています。
selectionMode が「Cell」や「CellRange」でも、上記のように書くことで “選択されたセルが属している行” を強調可能です。
まとめ
-
行全体を簡単に強調表示したいのであれば、
-selectionMode="Row"を設定すると、標準のハイライトが行単位で適用されます。 -
デフォルトの強調色を変更したい場合は、
- CSS で.wj-state-selectedを上書きするか、
-itemFormatterを使って手動で色を指定します。 -
セル選択(セル単位)でも “選択中の行” を強調したい場合は、
-itemFormatterを使ってif (r === grid.selection.row) { ... }のように行ごとに色を塗り替えます。
これらの方法を組み合わせることで、FlexGrid の行強調をより柔軟にカスタマイズできます。ご要望に合わせて使い分けてみてください。