Merge pull request #13589 from IgniteUI/mkirkova/fix-13514-16.1.x

Return updated values when groupingDone is emitted

Author: kdinev

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

@@ -258,6 +258,7 @@ export class IgxGrouping extends IgxSorting implements IGridGroupingStrategy {
         groupsRecords?: any[], fullResult: IGroupByResult = { data: [], metadata: [] }): IGroupByResult {
         const metadata: IGroupByRecord[] = [];
         const grouping = this.groupDataRecursive(data, state, 0, null, metadata, grid, groupsRecords, fullResult);
+        grid?.groupingPerformedSubject.next();
         return {
             data: grouping,
             metadata

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

@@ -15,7 +15,7 @@ import { IgxGridGroupByRowComponent } from './groupby-row.component';
 import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface';
 import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 import { IgxColumnComponent } from '../columns/column.component';
-import { takeUntil } from 'rxjs/operators';
+import { take, takeUntil } from 'rxjs/operators';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IGroupingExpression } from '../../data-operations/grouping-expression.interface';
 import { IgxColumnResizingService } from '../resizing/resizing.service';
@@ -53,6 +53,7 @@ import { IgxGridDragSelectDirective } from '../selection/drag-select.directive';
 import { IgxGridBodyDirective } from '../grid.common';
 import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
 import { IgxGridGroupByAreaComponent } from '../grouping/grid-group-by-area.component';
+import { Observable, Subject } from 'rxjs';
 
 let NEXT_ID = 0;
 
@@ -425,6 +426,16 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
 
     private childDetailTemplates: Map<any, any> = new Map();
 
+    /**
+     * @hidden @internal
+     */
+    public groupingPerformedSubject = new Subject<void>();
+
+    /**
+     * @hidden @internal
+     */
+    public groupingPerformed$: Observable<void> = this.groupingPerformedSubject.asObservable();
+
     /**
      * Gets/Sets the group by state.
      *
@@ -478,7 +489,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
                 groupedColumns: groupedCols,
                 ungroupedColumns: ungroupedCols
             };
-            this.groupingDone.emit(groupingDoneArgs);
+            this.groupingPerformed$.pipe(take(1)).subscribe(() => {
+                this.groupingDone.emit(groupingDoneArgs);
+            });
         }
     }
 
@@ -739,6 +752,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         this._gridAPI.clear_groupby(name);
         this.calculateGridSizes();
         this.notifyChanges(true);
+        this.groupingPerformedSubject.next();
     }
 
     /**

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

@@ -712,6 +712,30 @@ describe('IgxGrid - GroupBy #grid', () => {
         expect(currExpr.groupedColumns[0].field).toEqual('Downloads');
     }));
 
+    it('should update groupsRecords when groupingDone is emitted', fakeAsync(() => {
+        const fix = TestBed.createComponent(DefaultGridComponent);
+        const grid = fix.componentInstance.instance;
+        fix.detectChanges();
+
+        let groupsRecordsLength;
+
+        spyOn(grid.groupingDone, 'emit').and.callThrough();
+        grid.groupingDone.subscribe(() => {
+            groupsRecordsLength = grid.groupsRecords.length;
+        });
+        grid.groupBy({
+            fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false
+        });
+        tick();
+        fix.detectChanges();
+        expect(groupsRecordsLength).toEqual(5);
+
+        grid.clearGrouping();
+        tick();
+        fix.detectChanges();
+        expect(groupsRecordsLength).toEqual(0);
+    }));
+
     it('should allow setting custom template for group row content and expand/collapse icons.', fakeAsync(() => {
         const fix = TestBed.createComponent(CustomTemplateGridComponent);
         const grid = fix.componentInstance.instance;