Angular Tree Grid の選択

    Ignite UI for Angular Tree Grid を使用して、さまざまなイベント、豊富な API、または単一選択などのシンプルなマウス操作でデータを簡単に選択できます。

    Angular Grid 選択の例

    以下のサンプルは、Tree Grid のセル選択動作の 3 つのタイプを示します。以下のボタンを使用して、使用可能な各選択モードを有効にします。Snackbar メッセージ ボックスで各ボタンの操作について簡単に説明します。

    Angular Grid 選択のオプション

    Ignite UI for Angular Tree Grid コンポーネントは、行選択、セル選択、列選択の 3 つの選択モードを提供します。デフォルトでは、Tree Grid で複数セル選択モードのみが有効になっています。選択モードを変更/有効化するには、rowSelection、cellSelection 、または selectable プロパティを使用できます。

    Angular 行選択

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

    • none - Tree Grid の行選択が無効になります。
    • single - Tree Grid 内の 1 行のみの選択が利用可能になります。
    • multiple - 複数行の選択は、ctrl + click、space キーを押して行セレクターを使用することにより、複数行の選択が可能になります。
    • multipleCascade - これはカスケード選択のモードであり、ユーザーがユーザーの操作で選択したレコードの下のツリー内のすべての子が選択されます。このモードでは、親の選択状態はその子の選択状態に完全に依存します。

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

    Angular セル選択

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

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

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

    Angular 列選択

    selectable プロパティ を使用して、列ごとに以下のオプションを指定できます。

    • False - 対応する列選択は Tree Grid に対して無効になります。
    • True - 対応する列選択は Tree Grid に対して有効になります。
    • 以下の 3 つのバリエーションがあります。
    • 単一選択 - 列セルをマウス クリックします。
    • 複数列の選択 - Ctrl キーを押しながら列セルをマウス クリックします。
    • 列の範囲選択 - Shift キーを押しながら + マウス クリック、その間のすべての列が選択されます。

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

    既知の問題と制限

    • IE11 で選択を有効にした Tree Grid コンポーネントを使用するには、Angular アプリケーションの polyfill.ts に配列ポリフィルを明示的にインポートする必要があります。IE11 は、バージョン 13.0.0 でサポートされなくなりました。

      import 'core-js/es7/array';

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

      • Row Selection
      • Row Expand/collapse
      • Row Editing
      • Row Pinning

    API リファレンス

    その他のリソース

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