React Tree Grid 列選択の概要

React Tree Grid の Ignite UI for React 列選択機能は、シングルクリックで列全体を選択してハイライト表示する、簡略化された Excel のような方法を提供します。これは ColumnSelection 入力を通じて有効にできます。豊富な API のおかげで、この機能により、選択状態の操作、選択された部分からのデータ抽出、データ分析操作、視覚化が簡単に行えます。

React Tree Grid 列選択の例

以下のサンプルは、IgrTreeGrid の 3 種類の列選択動作を示しています。以下の列選択ドロップダウンを使用して、利用可能な各選択モードを有効にします。

*Unit Price および Discontinued の列選択が無効になっています。

基本的な使用方法

列選択機能は、GridSelectionMode 値を受け取る ColumnSelection 入力によって有効にすることができます。

インタラクション

デフォルトの選択モードは None です。Single または Multiple に設定されると、すべての列は Selectable になります。列を選択するには、列をクリックして Selected としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。

*Personal Details 列グループでは、列 ID と Title のみを選択できます。

キーボードの組み合わせ

列の選択機能のキーボード ナビゲーションには 2 つのオプションがあります。

• 複数列選択 - CTRL キーを押しながら、すべての選択可能なヘッダー セルを クリック。
• 範囲列の選択 - SHIFT キーを押しながら + クリック、間にあるすべての選択可能な列を選択します。

API 操作

API は、非表示列に関していくつかの追加機能を提供し、対応する setter を設定することにより、すべての非表示列を Selected としてマークできます。

API 操作の詳細については、API リファレンス セクションを参照してください。

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドの class を設定する必要があります。

<IgrTreeGrid className="grid"></IgrTreeGrid>

次に、そのクラスに関連する CSS プロパティを設定します。

<IgrTreeGrid class="grid"></IgrTreeGrid>

デモ

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)