IgxGrid 列の選択／非選択をコードで行う。

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

Ignite UI for Angular 9.1では、IgxGridComponentに

• 指定した列を選択するselectColumnsメソッド
• 指定した列の選択を解除するdeselectColumnsメソッド
• すべての列を選択するselectAllColumnsメソッド
• すべての列の選択を解除するdeselectAllColumnsメソッド

が追加されました。これにより、コードで列の選択／非選択を行うことができるようになりました。

// "CompanyName"列と"Address"列を選択する場合
this.grid.selectColumns(["CompanyName", "Address"], true);

// "CompanyName"列と"Address"列の選択を解除する場合
this.grid.deselectColumns(["CompanyName", "Address"]);

// すべての列を選択する場合
this.grid.selectAllColumns();

// すべての列の選択を解除する場合
this.grid.deselectAllColumns();

　

サンプル

　

リファレンス

• selectColumnsメソッド
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selectcolumns
• deselectColumnsメソッド
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#deselectcolumns
• selectAllColumnsメソッド
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#selectallcolumns
• deselectAllColumnsメソッド
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#deselectallcolumns