IgxGrid で全ページの全行を選択する方法

Ignite UI for Angular 13.1.7 バージョン時点での情報に基づいています。

Ignite UI for Angular で提供している IgxGrid において、全ページの全レコードをチェック（選択）する場合、下記二つの方法がございます。

１．グリッドの行セレクター列の列ヘッダに配置されているチェックボックスをクリックし、全行を選択する。

２．IgxGrid の SelectAll() メソッドを呼び出すことで、全行を選択する。

  onClick(grid: IgxGridComponent) {
    grid.selectAllRows();
  }

サンプル

※ 補足情報

現在表示されているページの全行のみを選択する場合、IgxGrid の rowList プロパティと selectRows メソッドを下記の様に組み合わせることで実現することができます。

  onClick2(grid: IgxGridComponent) {
    var ids = grid.rowList.map((row) => row.data['id']);
    grid.selectRows(ids);
  }