Grid マルチセル選択

マルチセル選択は Grid のセルの範囲選択を可能にします。さまざまなマルチセル選択機能が利用可能です。

  • マウス ドラッグ - マウス ドラッグ - セルが長方形に選択されます。
  • Ctrl キー 押下 + マウス ドラッグ - 複数の範囲が選択されます。他の既存のセル選択は保持されます。
  • Shift キーを使用して複数セルの選択をインスタンス化します。Shift キーを押しながら、単一セルを選択して別の単一セルを選択します。2 つのセル間のセル範囲が選択されます。Shift キーを押しながら他の 2 番目のセルを選択すると、最初に選択したセルの位置 (開始点) に基づいてセル選択範囲が更新されます。
  • Shift キーを押しながら矢印キーを使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
  • Shift キーを押しながら Ctrl + Arrow キーCtrl + Home/End を使用してキーボードで複数セルを選択。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
  • Ctrl キーを押しながら左マウスキーでクリックすると、選択したセルコレクションに単一のセル範囲が追加されます。
  • マウスでクリックしてドラッグすることで、連続した複数セルの選択が可能です。

デモ

キーボード ナビゲーションのインタラクション

Shift キーが押されている間
  • Shift + 上矢印 - 現在の選択範囲に上のセルを追加します。
  • Shift + 下矢印 - 現在の選択範囲に下のセルを追加します。
  • Shift + 左矢印 - 現在の選択範囲に左のセルを追加します。
  • Shift + 右矢印 - 現在の選択範囲に右のセルを追加します。
Ctrl + Shift キーが押されている間
  • Ctrl + Shift + 上矢印 - 列内のフォーカスのあるセルの上にあるすべてのセルを選択します。
  • Ctrl + Shift + 下矢印 - 列内のフォーカスのあるセルの下にあるすべてのセルを選択します。
  • Ctrl + Shift + 左矢印 - 行の先頭まですべてのセルを選択します。
  • Ctrl + Shift + 右矢印 - 行末まですべてのセルを選択します。
  • Ctrl + Shift + Home - フォーカスされているセルからグリッド内の最初のセルまでのすべてのセルを選択します。
  • Ctrl + Shift + End - フォーカスされているセルからグリッド内の最後のセルまでのすべてのセルを選択します。
Note

連続スクロールは Grid のボディでのみ可能です。

API の使用

以下は、範囲の選択、選択の解除、または選択したセル データを取得する方法です。

範囲の選択

selectRange(range) - API を使用してセルの範囲を選択します。rowStartrowEnd は行インデックスを使用する必要があり、columnStartcolumnEnd は列インデックスまたは列データフィールド値を使用できます。

const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid1.selectRange(range);
...

const range = { rowStart: 0, rowEnd: 2, columnStart: 'Name', columnEnd: 'ParentID' };
this.grid1.selectRange(range);
Note

選択範囲は加法演算で以前の選択をクリアすることはありません。

セル選択のクリア

clearCellSelection() は現在のセル選択をクリアします。

選択したデータの取得

getSelectedData() は、選択したデータの配列を選択内容に応じた形式で返します。以下は例です。

  1. 3 つの異なる単一セルが選択されている場合:

    expectedData = [
     { CompanyName: "Infragistics" },
     { Name: "Michael Langdon" },
     { ParentID: 147 }
    ];
    
  2. 1 列から 3 つのセルが選択されている場合:

    expectedData = [
     { Address: "Obere Str. 57"},
     { Address: "Avda. de la Constitución 2222"},
     { Address: "Mataderos 2312"}
    ];
    
  3. 1 行 3 列から 3 つのセルをマウスドラッグで選択した場合:

    expectedData = [
     { Address: "Avda. de la Constitución 2222", City: "México D.F.", ContactTitle: "Owner" }
    ];
    
  4. 2 行 3 列から 3 つのセルをマウスドラッグで選択した場合:

    expectedData = [
     { ContactTitle: "Sales Agent", Address: "Cerrito 333", City: "Buenos Aires"},
     { ContactTitle: "Marketing Manager", Address: "Sierras de Granada 9993", City: "México D.F."}
    ];
    
  5. 2 つの異なる範囲が選択されている場合:

    expectedData = [
     { ContactName: "Martín Sommer", ContactTitle: "Owner"},
     { ContactName: "Laurence Lebihan", ContactTitle: "Owner"},
     { Address: "23 Tsawassen Blvd.", City: "Tsawassen"},
     { Address: "Fauntleroy Circus", City: "London"}
    ];
    
  6. 2 つの重複範囲が選択されている場合、形式は次のようになります。

    expectedData = [
     { ContactName: "Diego Roel", ContactTitle: "Accounting Manager", Address: "C/ Moralzarzal, 86"},
     { ContactName: "Martine Rancé", ContactTitle: "Assistant Sales Agent", Address: "184, chaussée de Tournai", City: "Lille"},
     { ContactName: "Maria Larsson", ContactTitle: "Owner", Address: "Åkergatan 24", City: "Bräcke"},
     { ContactTitle: "Marketing Manager", Address: "Berliner Platz 43", City: "München"}
    ];
    
Note

セルがグリッドビューポートに表示されていない場合、selectedCells() は結果を返しませんが、getSelectedData() は選択されたセルデータを返します。 getSelectedRanges(): GridSelectionRange[] は、キーボードとポインタの両方の操作からグリッドで現在選択されている範囲を返します。タイプは GridSelectionRange[] です。

機能の統合

マルチセル選択はインデックス ベースです (DOM 要素選択)。

  • Sorting - ソートが実行されると、選択は解除されません。昇順または降順で並べ替えている間、現在選択されているセルはそのままになります。昇順または降順で並べ替えている間、現在選択されているセルはそのままになります。
  • Paging - ページング時に選択されたセルはクリアされます。選択はページを超えては持続されません。選択はページを超えては持続されません。
  • Filtering - フィルタリングが実行されると、選択は解除されません。フィルタリングがクリアされている場合は、最初に選択されたセルが返されます。
  • Resizing - 列のサイズを変更すると、選択したセルはクリアされません。
  • Hiding - 選択したセルはクリアされません。列が非表示の場合は、次に表示されている列のセルが選択されます。
  • Pinning - 選択したセルはクリアされません。非表示と同じです。
  • Group by - 列をグループ化すると、選択したセルはクリアされません。

Grid 行選択

Ignite UI for Angular の行選択には、行内のその他すべての列の前にチェックボックスがあります。チェックボックスをクリックすると、行を選択または選択解除になり、データの複数行を選択できます。

デモ

設定

単一選択

Grid の単一選択を Grid の onSelection イベントを設定して簡単に設定できます。イベントは、セル コンポーネントへの参照を発生します。セル コンポーネントは、保持している行コンポーネントへの参照を持ちます。行コンポーネント参照の rowID ゲッターを使用して、 (rowData[primaryKey] または rowData オブジェクト自身のいずれかを使用して) 選択の適切なリストに行の一意識別子を渡します。単一行のみを常に選択させるには、選択行の選択リストを空にします (selectRows メソッド呼び出しの 2 番目の引数です)。

<!-- selectionExample.component.html -->

<igx-grid #grid1 [data]="remote | async" [rowSelectable]="false" (onSelection)="handleRowSelection($event)"
    [width]="'800px'" [height]="'600px'" [allowFiltering]="true">
        ...
</igx-grid>
/* selectionExample.component.ts */

public handleRowSelection(args) {
    const targetCell = args.cell as IgxGridCellComponent;
    if (!this.selection) {
        this.grid1.selectRows([targetCell.row.rowID], true);
    }
}

複数選択

複数行選択を有効にするには、igx-gridrowSelectable プロパティを公開します。rowSelectabletrue に設定すると、各行および Grid ヘッダーで選択チェックボックス フィールドを有効にします。チェックボックスを使用して複数行を選択できます。選択はスクロール、ページング、および並べ替えとフィルターなどのデータ操作で保持されます。

<!-- selectionExample.component.html -->

<igx-grid #grid1 [data]="remote | async" [primaryKey]="'ProductID'" [rowSelectable]="selection" (onSelection)="handleRowSelection($event)"
    [width]="'800px'" [height]="'600px'" [allowFiltering]="true">
    ...
</igx-grid>
/* selectionExample.component.ts */

public selection = true;

Note: 行選択およびセル選択を正しく実行するには、Grid にリモート仮想化がある場合、primaryKey を設定します。

注: フィルタリングを設定した場合、selectAllRows()deselectAllRows() がすべてのフィルター行を選択/非選択します。

Note: Grid にリモート仮想化を設定している場合、ヘッダー チェックボックスがすべてのレコードを選択/非選択にします。すべてのレコードをヘッダー チェックボックスで選択した後に表示行の選択が解除された場合、オンデマンドで Grid に新しいデータを読み込んだ際に新しく読み込んだ行が選択されない機能制限があります。

注: セル選択は onSelection をトリガーしますが onRowSelectionChange はトリガーしません。

コード スニペット

コードで行を選択

以下のコード例は (primaryKey) を使用して単一または複数行を選択できます。

<!-- selectionExample.component.html -->

<igx-grid ... [primaryKey]="'ID'">
...
</igx-grid>
...
<button (click)="this.grid.selectRows([1,2,5])">Select 1,2 and 5</button>

1、2、および 5 の ID を持つデータ エントリに対応する行を Grid の選択に追加します。

選択イベントのキャンセル

<!-- selectionExample.component.html -->

<igx-grid (onRowSelectionChange)="handleRowSelectionChange($event)">
...
</igx-grid>
/* selectionExample.component.ts */

public handleRowSelectionChange(args) {
    args.newSelection = args.oldSelection; // overwrites the new selection, making it so that no new row(s) are entered in the selectionAPI
    args.checked = false; // overwrites the checkbox state
}

API リファレンス

その他のリソース

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