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 ごとに以下のオプションを指定できます。このプロパティが true または false に設定されている場合、対応する列の選択がそれぞれ有効または無効になります。

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

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

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

    既知の問題と制限

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

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

    API リファレンス

    その他のリソース

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