fix(grid,perf): don't emit multiple events for group row selection

BEHAVIOR CHANGE: row selection even is now emitted only once
for the entire group selected as intended.
`added` and `removed` arrays in args contain all affected rows

Closes #9250

projects/igniteui-angular/src/lib/grids/common/events.ts

@@ -83,11 +83,11 @@ export interface IColumnResizingEventArgs extends IColumnResizeEventArgs, Cancel
 }
 
 export interface IRowSelectionEventArgs extends CancelableEventArgs, IBaseEventArgs {
-    oldSelection: any[];
+    readonly oldSelection: any[];
     newSelection: any[];
-    added: any[];
-    removed: any[];
-    event?: Event;
+    readonly added: any[];
+    readonly removed: any[];
+    readonly event?: Event;
 }
 
 export interface IColumnSelectionEventArgs extends CancelableEventArgs, IBaseEventArgs {

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

@@ -1134,9 +1134,13 @@ describe('IgxGrid - GroupBy #grid', () => {
                 expect(GridSelectionFunctions.verifyGroupByRowCheckboxState(grRow, false, false));
             }
 
+            const selectionSpy = spyOn(grid.rowSelected, "emit");
             GridSelectionFunctions.clickHeaderRowCheckbox(fix);
             fix.detectChanges();
 
+            expect(selectionSpy).toHaveBeenCalledTimes(1);
+            const args = selectionSpy.calls.mostRecent().args[0];
+            expect(args.added.length).toBe(8);
             expect(grid.selectedRows.length).toEqual(8);
 
             rows = fix.debugElement.queryAll(By.css('.igx-grid__tr--selected'));

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

@@ -218,13 +218,9 @@ export class IgxGridGroupByRowComponent implements OnDestroy {
         }
         event.stopPropagation();
         if (this.areAllRowsInTheGroupSelected) {
-            this.groupRow.records.forEach(row => {
-                this.gridSelection.deselectRow(this.getRowID(row), event);
-            });
+            this.gridSelection.deselectRows(this.groupRow.records.map(x => this.getRowID(x)));
         } else {
-            this.groupRow.records.forEach(row => {
-                this.gridSelection.selectRowById(this.getRowID(row), false, event);
-            });
+            this.gridSelection.selectRows(this.groupRow.records.map(x => this.getRowID(x)));
         }
     }
 

projects/igniteui-angular/src/lib/grids/selection/selection.service.ts

@@ -438,7 +438,6 @@ export class IgxGridSelectionService {
         const addedRows = allRowIDs.filter((rID) => !this.isRowSelected(rID));
         const newSelection = this.rowSelection.size ? this.getSelectedRows().concat(addedRows) : addedRows;
         this.indeterminateRows.clear();
-        this.selectedRowsChange.next();
         this.emitRowSelectionEvent(newSelection, addedRows, [], event);
     }
 
@@ -449,10 +448,10 @@ export class IgxGridSelectionService {
         }
         clearPrevSelection = !this.grid.isMultiRowSelectionEnabled || clearPrevSelection;
 
-        const newSelection = clearPrevSelection ? [rowID] : this.getSelectedRows().indexOf(rowID) !== -1 ?
-            this.getSelectedRows() : [...this.getSelectedRows(), rowID];
-        const removed = clearPrevSelection ? this.getSelectedRows() : [];
-        this.selectedRowsChange.next();
+        const selectedRows = this.getSelectedRows();
+        const newSelection = clearPrevSelection ? [rowID] : this.rowSelection.has(rowID) ?
+            selectedRows : [...selectedRows, rowID];
+        const removed = clearPrevSelection ? selectedRows : [];
         this.emitRowSelectionEvent(newSelection, [rowID], removed, event);
     }
 
@@ -463,11 +462,44 @@ export class IgxGridSelectionService {
         }
         const newSelection = this.getSelectedRows().filter(r => r !== rowID);
         if (this.rowSelection.size && this.rowSelection.has(rowID)) {
-            this.selectedRowsChange.next();
             this.emitRowSelectionEvent(newSelection, [], [rowID], event);
         }
     }
 
+    /** Select the specified rows and emit event. */
+    public selectRows(keys: any[], clearPrevSelection?: boolean, event?): void {
+        if (!this.grid.isMultiRowSelectionEnabled) {
+            return;
+        }
+
+        const rowsToSelect = keys.filter(x => !this.isRowDeleted(x) && !this.rowSelection.has(x));
+        if (!rowsToSelect.length && !clearPrevSelection) {
+            // no valid/additional rows to select and no clear
+            return;
+        }
+
+        const selectedRows = this.getSelectedRows();
+        const newSelection = clearPrevSelection ? rowsToSelect : [...selectedRows, ...rowsToSelect];
+        const keysAsSet = new Set(rowsToSelect);
+        const removed = clearPrevSelection ? selectedRows.filter(x => !keysAsSet.has(x)) : [];
+        this.emitRowSelectionEvent(newSelection, rowsToSelect, removed, event);
+    }
+
+    public deselectRows(keys: any[], event?): void {
+        if (!this.rowSelection.size) {
+            return;
+        }
+
+        const rowsToDeselect = keys.filter(x => this.rowSelection.has(x));
+        if (!rowsToDeselect.length) {
+            return;
+        }
+
+        const keysAsSet = new Set(rowsToDeselect);
+        const newSelection = this.getSelectedRows().filter(r => !keysAsSet.has(r));
+        this.emitRowSelectionEvent(newSelection, [], rowsToDeselect, event);
+    }
+
     /** Select specified rows. No event is emitted. */
     public selectRowsWithNoEvent(rowIDs: any[], clearPrevSelection?): void {
         if (clearPrevSelection) {

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

@@ -69,7 +69,7 @@
 <div class="wrapper">
     <h3>Selection Performance</h3>
     <igx-grid [data]="data2" [allowFiltering]="true" cellSelection="none" width="1200px"
-    height="500px" rowSelection="multiple" [groupingExpressions]="perfGrpExpr">
+    height="500px" rowSelection="multiple" [groupingExpressions]="perfGrpExpr" (rowSelected)="rowSelectionChanged($event)">
         <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">

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

@@ -3,7 +3,7 @@ import { Component, ViewChild, OnInit, Inject } from '@angular/core';
 
 import {
     IgxGridComponent, SortingDirection, ISortingExpression,
-    DefaultSortingStrategy, DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, GridSummaryPosition, GridSummaryCalculationMode
+    DefaultSortingStrategy, DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, GridSummaryPosition, GridSummaryCalculationMode, IRowSelectionEventArgs
 } from 'igniteui-angular';
 
 @Component({
@@ -33,7 +33,7 @@ export class GridGroupBySampleComponent implements OnInit {
     constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) { }
 
     public ngOnInit(): void {
-        for (let i = 0; i < 60; i++) {
+        for (let i = 0; i < 2500; 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' }));
@@ -174,4 +174,8 @@ export class GridGroupBySampleComponent implements OnInit {
         this.grid1.showGroupArea = !this.grid1.showGroupArea;
         this.grid1.cdr.detectChanges();
     }
+
+    public rowSelectionChanged(e: IRowSelectionEventArgs) {
+        console.log(e);
+    }
 }