Blazor Grid 列選択の概要
Blazor Grid の Ignite UI for Blazor 列選択機能は、シングルクリックで列全体を選択してハイライト表示する、簡略化された Excel のような方法を提供します。これは columnSelection
入力を通じて有効にできます。豊富な API のおかげで、この機能により、選択状態の操作、選択された部分からのデータ抽出、データ分析操作、視覚化が簡単に行えます。
Blazor Grid 列選択の例
以下のサンプルは、IgbGrid
の 3 種類の列選択動作を示しています。以下の列選択ドロップダウンを使用して、利用可能な各選択モードを有効にします。
*Contact Title、City、および Address 列の列選択が無効になっています。
基本的な使用方法
列選択機能は、GridSelectionMode
値を受け取る ColumnSelection
入力によって有効にすることができます。
インタラクション
デフォルトの選択モードは None
です。Single
または Multiple
に設定されると、すべての列は Selectable
になります。列を選択するには、列をクリックして Selected
としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。
[!Note] 複数列ヘッダー機能は
Selectable
入力に反映されません。その子の 1 つ以上で選択動作が有効な場合、ColumnGroupComponent
はSelectable
です。さらに、すべてのSelectable
子孫がSelected
である場合、コンポーネントはSelected
としてマークされます。
*Country Information 列グループでは、City 列 および Postal code 列のみを選択できます。
キーボードの組み合わせ
[!Note] キーボードの組み合わせは、グリッドの
ColumnSelection
入力がmultiple
に設定されている場合にのみ使用できます。
列の選択機能のキーボード ナビゲーションには 2 つのオプションがあります。
- 複数列選択 - Ctrl キーを押しながら、すべての選択可能なヘッダー セルを クリック。
- 範囲列の選択 - Shift キーを押しながら + クリック、間にあるすべての選択可能な列を選択します。
API 操作
API は、非表示列に関していくつかの追加機能を提供し、対応する setter を設定することにより、すべての非表示列を Selected
としてマークできます。
[!Note] 上記は
ColumnGroupComponent
にも適用されますが、Selected
プロパティを変更する場合、その子孫の状態を変更します。
API 操作の詳細については、API リファレンス セクションを参照してください。
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドの class
を設定する必要があります。
<IgbGrid class="grid"></IgbGrid>
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-row-selected-background: #0062A3;
--ig-grid-row-selected-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
--ig-grid-header-selected-text-color: #ecaa53;
--ig-grid-header-selected-background: #0062A3;
--ig-grid-row-selected-hover-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
}
デモ
API リファレンス
以下は、列選択 UI のその他の API です。
IgbGrid
プロパティ:
IgbColumn
プロパティ:
IgbColumnGroup
プロパティ:
IgbGrid
イベント:
OnColumnsSelectionChange
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。