React Tree Grid 選択の概要

React Tree Grid の Ignite UI for React 選択機能を使用すると、単純なマウス操作を使用してデータを簡単に操作および操作できます。使用可能な選択モードは 3 つあります。

• 行の選択
• セルの選択
• 列の選択

RowSelection プロパティを使用すると、以下を指定できます。

• None (なし)
• Single (単一)
• Multiple Select (複数選択)

React Tree Grid 選択の例

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

React Tree Grid 選択のオプション

React Tree Grid 行選択

プロパティ RowSelection を使用すると、次のオプションを指定できます。

• None - IgrTreeGrid の行選択が無効になります。

• Single - IgrTreeGrid 内の 1 行のみの選択が利用可能になります。

• Multiple - 複数行の選択は、CTRL + クリック、Space キーを押して行セレクターを使用することにより、複数行の選択が可能になります。

• MultipleCascade - これはカスケード選択のモードであり、ユーザーがユーザーの操作で選択したレコードの下のツリー内のすべての子が選択されます。このモードでは、親の選択状態はその子の選択状態に完全に依存します。

詳細については、行選択トピックを参照してください。

React Tree Grid セル選択

以下のオプションは、プロパティ CellSelection で指定できます。

• None - IgrTreeGrid のセル選択が無効になります。
• Single - IgrTreeGrid 内の 1 セルのみの選択が利用可能になります。
• Multiple - IgrTreeGrid の選択のデフォルト状態です。複数セルの選択は、マウスの左ボタンを連続してクリックした後、マウスをセル上にドラッグすることで利用できます。

詳細については、セル選択トピックを参照してください。

React Tree Grid 列選択

Selectable プロパティを使用して、IgrColumn.selectable ごとに以下のオプションを指定できます。このプロパティが true または false に設定されている場合、対応する列の選択がそれぞれ有効または無効になります。

以下の 3 つのバリエーションがあります。

• Single selection (単一選択) - 列セルをマウス クリックします。
• Multi column selection (複数列の選択) - CTRL キーを押しながら列セルをマウス クリックします。
• Range column selection (列の範囲選択) - SHIFT キーを押しながら + マウス クリック、その間のすべての列が選択されます。

詳細については、列選択トピックを参照してください。

既知の問題と制限

グリッドに PrimaryKey が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合）、データ要求が完了すると、行は次の状態を失います:

• 行の選択
• 行の展開/縮小
• 行の編集
• 行のピン固定

API リファレンス

その他のリソース

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

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