fix(IgxGrid): Don't use spread operator for large collections. (#15916)

Author: MayaKirova

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

@@ -76,7 +76,7 @@ export class IgxSorting implements IGridSortingStrategy {
         grid: GridType = null,
         groupsRecords: any[] = [],
         fullResult: IGroupByResult = { data: [], metadata: [] }
-    ): any[] {
+    ): IGroupByResult {
         const expressions = state.expressions;
         const expansion = state.expansion;
         let i = 0;
@@ -117,23 +117,24 @@ export class IgxSorting implements IGridSortingStrategy {
             fullResult.metadata.push(null);
             if (level < expressions.length - 1) {
                 recursiveResult = this.groupDataRecursive(group, state, level + 1, groupRow,
-                    expanded ? metadata : [], grid, groupsRecords, fullResult);
+                    [], grid, groupsRecords, fullResult);
                 if (expanded) {
-                    result = result.concat(recursiveResult);
+                    result = result.concat(recursiveResult.data);
+                    metadata = metadata.concat(recursiveResult.metadata);
                 }
             } else {
                 for (const groupItem of group) {
                     fullResult.metadata.push(groupRow);
                     fullResult.data.push(groupItem);
                 }
                 if (expanded) {
-                    metadata.push(...fullResult.metadata.slice(fullResult.metadata.length - group.length));
-                    result.push(...fullResult.data.slice(fullResult.data.length - group.length));
+                    metadata = metadata.concat(fullResult.metadata.slice(fullResult.metadata.length - group.length));
+                    result = result.concat(fullResult.data.slice(fullResult.data.length - group.length));
                 }
             }
             i += group.length;
         }
-        return result;
+        return { data: result, metadata };
     }
 
     /**
@@ -264,8 +265,8 @@ export class IgxGrouping extends IgxSorting implements IGridGroupingStrategy {
         const grouping = this.groupDataRecursive(data, state, 0, null, metadata, grid, groupsRecords, fullResult);
         grid?.groupingPerformedSubject.next();
         return {
-            data: grouping,
-            metadata
+            data: grouping.data,
+            metadata: grouping.metadata
         };
     }
 }

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

@@ -3822,6 +3822,32 @@ describe('IgxGrid - GroupBy #grid', () => {
         }
     });
 
+    it('should be able to build groups with 100 000+ records', () => {
+        const fix = TestBed.createComponent(GroupableGridComponent);
+        const grid = fix.componentInstance.instance;
+
+        const data = [];
+        for (let i = 0; i < 1000000; i++) {
+          data.push({
+                Downloads: i,
+                ID: 1,
+                ProductName: 'Test'
+            });
+        }
+
+        fix.componentInstance.data = data;
+        fix.detectChanges();
+
+        grid.groupBy({
+            fieldName: 'ProductName',
+            dir: SortingDirection.Asc
+        });
+        fix.detectChanges();
+
+        let groupRows = grid.groupsRowList.toArray();
+        checkGroups(groupRows, ['Test']);
+    });
+
     describe('GroupBy with state directive', () => {
         let fix: ComponentFixture<GridGroupByStateComponent>;
         let state: IgxGridStateDirective;