diff --git a/projects/igniteui-angular/src/lib/grids/common/strategy.ts b/projects/igniteui-angular/src/lib/grids/common/strategy.ts index 5dd74d52c23..69912780031 100644 --- a/projects/igniteui-angular/src/lib/grids/common/strategy.ts +++ b/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,9 +117,10 @@ 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) { @@ -127,13 +128,13 @@ export class IgxSorting implements IGridSortingStrategy { 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 }; } } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index a3d968f03d0..aa9dc341bf8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/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; let state: IgxGridStateDirective;