Web Components Tree Grid 選択の概要

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

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

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

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

Web Components Tree Grid 選択の例

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

Web Components Tree Grid 選択のオプション

Web Components Tree Grid 行選択

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

None - IgcTreeGridComponent の行選択が無効になります。
Single - IgcTreeGridComponent 内の 1 行のみの選択が利用可能になります。
Multiple - 複数行の選択は、Ctrl + クリック、Space キー を押して行セレクターを使用することにより、複数行の選択が可能になります。

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

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

Web Components Tree Grid セル選択

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

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

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

Web Components Tree Grid 列選択

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

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

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

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

既知の問題と制限

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

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

API リファレンス

IgcTreeGridComponent

その他のリソース

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