From 9677b7186a110e4cfb0d699b725ace83e0a58d66 Mon Sep 17 00:00:00 2001
From: Damyan Petev <damyanpetev@users.noreply.github.com>
Date: Tue, 7 Sep 2021 12:09:18 +0300
Subject: [PATCH] perf(grid): reduce delay on larger group row selection

---
 .../src/lib/grids/grid/groupby-row.component.ts       |  3 ++-
 src/app/grid-groupby/grid-groupby.sample.html         | 11 +++++++++++
 src/app/grid-groupby/grid-groupby.sample.ts           |  9 +++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
index cdbec011c79..3439738bff6 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
+++ b/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);
     }
 
     /**
diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html
index 72c81c4b003..b85fe7abca9 100644
--- a/src/app/grid-groupby/grid-groupby.sample.html
+++ b/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>
diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts
index b63fc2fbbbd..9872a78be43 100644
--- a/src/app/grid-groupby/grid-groupby.sample.ts
+++ b/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 },