IgxGrid でExcelライクな複数行選択(ベータ版)

注意
この機能は現在ベータ版です。今後変更になる可能性があるため予めご了承ください。

これまでは、IgxGrid で [rowSelectable]=”true” にセットしただけでは、 複数行を選択する には左端のチェックボックスをいちいちクリックするしかありませんでした。

igniteui-angular@8.2.0-beta.0 からは、Excel のような操作で複数行選択が行えるようになりました。

• 任意のセル上で Ctrl + Click で飛び飛びの行を複数選択
• 任意のセル上で Shift + Click で範囲指定による複数行選択

これまで通りチェックボックスでも行選択が可能ですが、「任意のセル上で」も行選択が可能になったため、操作性が大幅に向上しています。

rowSelection プロパティ（新規）を使用します。受け入れ可能な値は

• none
• single
• multiple

の３つで、 複数行選択を可能にするには ‘multiple’ を指定します。

注意
rowSelectable プロパティは非推奨となりました。代わりに rowSelection プロパティを使用するようにしてください。

  <igx-grid [locale]="'ja-JP'"
            [data]="data"
            [displayDensity]="'compact'"
            [rowSelection]="'multiple'"
            [allowFiltering]="true"
            [filterMode]="'excelStyleFilter'"
            [showToolbar]="true"
            [columnHiding]="true">
    <igx-column *ngFor="let column of columns"
                [field]="column.field"
                [header]="column.header"
                [dataType]="column.dataType"
                [width]="column.width"
                [editable]="column.editable"
                [filterable]="column.filterable"
                [groupable]="column.groupable"
                [hasSummary]="column.hasSummary"
                [movable]="column.movable"
                [pinned]="column.pinned"
                [resizable]="column.resizable"
                [sortable]="column.sortable">
    </igx-column>
  </igx-grid>

• igniteui-angular@8.2.0-beta.1 で作成