Merge pull request #10089 from IgniteUI/dpetev/group-selection-perf

perf(grid): reduce delay on larger group row selection

Author: zdrawku

projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts

@@ -282,7 +282,8 @@ export class IgxGridGroupByRowComponent implements OnDestroy {
      * @hidden @internal
      */
     public get selectedRowsInTheGroup(): any[] {
-        return this.groupRow.records.filter(rowID => this.gridSelection.filteredSelectedRowIds.indexOf(this.getRowID(rowID)) > -1);
+        const selectedIds = this.gridSelection.filteredSelectedRowIds;
+        return this.groupRow.records.filter(rowID => selectedIds.indexOf(this.getRowID(rowID)) > -1);
     }
 
     /**

src/app/grid-groupby/grid-groupby.sample.html

@@ -65,3 +65,14 @@
 
     <button igxButton="raised" (click)="hideGroupableRow()">Show/Hide groupable row</button>
 </div>
+
+<div class="wrapper">
+    <h3>Selection Performance</h3>
+    <igx-grid [data]="data2" [allowFiltering]="true" cellSelection="none" width="1200px"
+    height="500px" rowSelection="multiple" [groupingExpressions]="perfGrpExpr">
+        <igx-column field="STATUS" header="Status" width="200px" [groupable]="true" [sortable]="true">
+        </igx-column>
+        <igx-column field="FIELD" header="Field" width="200px" [groupable]="true" [sortable]="true">
+        </igx-column>
+    </igx-grid>
+</div>

src/app/grid-groupby/grid-groupby.sample.ts

@@ -17,10 +17,12 @@ export class GridGroupBySampleComponent implements OnInit {
     private grid1: IgxGridComponent;
 
     public data: Array<any>;
+    public data2: any[] = [];
     public hideGroupedColumns = false;
     public expState = [];
     public columns: Array<any>;
     public groupingExpressions: Array<ISortingExpression>;
+    public perfGrpExpr = [ { fieldName: 'FIELD', dir: SortingDirection.Asc } ];
     public summaryMode: GridSummaryCalculationMode = GridSummaryCalculationMode.rootLevelOnly;
     public summaryModes = [];
     public selectionModes: any[];
@@ -31,6 +33,13 @@ export class GridGroupBySampleComponent implements OnInit {
     constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) { }
 
     public ngOnInit(): void {
+        for (let i = 0; i < 60; i++) {
+            this.data2.push(...Array(10).fill({ STATUS: 'A', FIELD: 'some text' }));
+            this.data2.push(...Array(10).fill({ STATUS: 'B', FIELD: 'some text' }));
+            this.data2.push(...Array(10).fill({ STATUS: 'C', FIELD: 'some text' }));
+            this.data2.push(...Array(10).fill({ STATUS: 'D', FIELD: 'some text' }));
+        }
+        this.data2 = this.data2.map((rec, index) => ({...rec, ID: index}));
         this.columns = [
             { dataType: 'string', field: 'ID', width: 100, hidden: true },
             { dataType: 'string', field: 'CompanyName', width: 300, groupable: true },