From 27eefd88d7c16881a62f59d278b33b8a75acf295 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 26 Mar 2025 15:26:03 +0200 Subject: [PATCH] refactor(IgxGridSummaries): Refactor how summaries height is calculated. --- .../grid-summary/_grid-summary-theme.scss | 2 + .../src/lib/grids/common/grid.interface.ts | 1 - .../src/lib/grids/grid-base.directive.ts | 18 +-------- .../src/lib/grids/grid/grid-summary.spec.ts | 39 ++++++++++--------- .../src/lib/grids/grid/grid.component.spec.ts | 13 ++++--- .../src/lib/grids/grid/grid.summary.pipe.ts | 10 ++--- .../hierarchical-grid.integration.spec.ts | 13 ++++--- .../grids/summaries/grid-summary.service.ts | 23 +++++------ .../src/lib/grids/summaries/grid-summary.ts | 1 - .../summaries/summary-cell.component.html | 18 ++++----- .../grids/summaries/summary-cell.component.ts | 4 -- .../grids/tree-grid/tree-grid.summary.pipe.ts | 3 -- 12 files changed, 62 insertions(+), 83 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss index 294b866cbc8..5268654f433 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss @@ -180,6 +180,8 @@ min-height: sizable(rem(24px), rem(30px), rem(36px)); } + flex-basis: sizable(rem(24px), rem(30px), rem(36px)); + position: relative; } diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index f0ea80c2def..3a26d1f8485 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -947,7 +947,6 @@ export interface GridType extends IGridDataBindable { readonly transactions: TransactionService; /** Represents the validation service for the grid. The type contains properties and methods (logic) for validating records */ readonly validation: IgxGridValidationService; - defaultSummaryHeight: number; summaryRowHeight: number; rowEditingOverlay: IgxToggleDirective; totalRowsCountAfterFilter: number; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 707584a4abf..6e53e366e1e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -298,9 +298,9 @@ export abstract class IgxGridBaseDirective implements GridType, public get summaryRowHeight(): number { if (this.hasSummarizedColumns && this.rootSummariesEnabled) { - return this._summaryRowHeight || this.summaryService.calcMaxSummaryHeight(); + return this._summaryRowHeight || undefined; } - return 0; + return undefined; } /** @hidden @internal */ @@ -4305,20 +4305,6 @@ export abstract class IgxGridBaseDirective implements GridType, return this._defaultRowHeight; } - /** - * @hidden @internal - */ - public get defaultSummaryHeight(): number { - switch (this.gridSize) { - case Size.Medium: - return 30; - case Size.Small: - return 24; - default: - return 36; - } - } - /** * Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width. * diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts index 6506ab34d91..13cbe515c64 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts @@ -31,6 +31,7 @@ describe('IgxGrid - Summaries #grid', () => { const SUMMARY_CELL = 'igx-grid-summary-cell'; const EMPTY_SUMMARY_CLASS = 'igx-grid-summary--empty'; const DEBOUNCETIME = 30; + const DEFAULT_SUMMARY_HEIGHT = 36; configureTestSuite((() => { return TestBed.configureTestingModule({ @@ -63,7 +64,7 @@ describe('IgxGrid - Summaries #grid', () => { it('should enableSummaries through grid API ', () => { expect(grid.hasSummarizedColumns).toBe(false); let tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height; - expect(tFoot < grid.defaultSummaryHeight).toBe(true); + expect(tFoot < DEFAULT_SUMMARY_HEIGHT).toBe(true); grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ProductID' }]); fixture.detectChanges(); @@ -83,7 +84,7 @@ describe('IgxGrid - Summaries #grid', () => { fixture.detectChanges(); tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height; - expect(tFoot).toEqual(grid.defaultSummaryHeight); + expect(tFoot).toEqual(DEFAULT_SUMMARY_HEIGHT); }); it(`should recalculate grid sizes correctly when the column is outside of the viewport`, () => { @@ -95,7 +96,7 @@ describe('IgxGrid - Summaries #grid', () => { fixture.detectChanges(); const tFoot = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height; - expect(tFoot).toEqual(5 * grid.defaultSummaryHeight); + expect(tFoot).toEqual(5 * DEFAULT_SUMMARY_HEIGHT); expect(GridSummaryFunctions.getRootSummaryRow(fixture)).toBeDefined(); }); @@ -241,28 +242,28 @@ describe('IgxGrid - Summaries #grid', () => { fixture.detectChanges(); const tFootHeight = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height; - expect(tFootHeight).toBeGreaterThanOrEqual(3 * grid.defaultSummaryHeight); + expect(tFootHeight).toBeGreaterThanOrEqual(3 * DEFAULT_SUMMARY_HEIGHT); }); it('should change custom summaries at runtime', () => { const summaryRow = GridSummaryFunctions.getRootSummaryRow(fixture); GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Sum', 'Avg'], ['10', '39,004', '3,900.4']); GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest', 'Items InStock'], ['May 17, 1990', '1337']); - GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 3, grid.defaultSummaryHeight); + GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 3, DEFAULT_SUMMARY_HEIGHT); grid.getColumnByName('UnitsInStock').summaries = fixture.componentInstance.dealsSummaryMinMax; grid.summaryRowHeight = 0; fixture.detectChanges(); const tFootHeight = GridFunctions.getGridFooterWrapper(fixture).nativeElement.getBoundingClientRect().height; - expect(tFootHeight).toBe(2 * grid.defaultSummaryHeight); + expect(tFootHeight).toBe(2 * DEFAULT_SUMMARY_HEIGHT); GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Min', 'Max'], ['0', '20,000']); - GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 2, grid.defaultSummaryHeight); + GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 2, DEFAULT_SUMMARY_HEIGHT); }); it('should be able to access alldata from each summary', () => { const summaryRow = GridSummaryFunctions.getRootSummaryRow(fixture); GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Sum', 'Avg'], ['10', '39,004', '3,900.4']); GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest', 'Items InStock'], ['May 17, 1990', '1337']); - GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 3, grid.defaultSummaryHeight); + GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 3, DEFAULT_SUMMARY_HEIGHT); grid.getColumnByName('UnitsInStock').summaries = fixture.componentInstance.inStockSummary; fixture.detectChanges(); @@ -395,8 +396,8 @@ describe('IgxGrid - Summaries #grid', () => { const summaryRow = GridSummaryFunctions.getRootSummaryRow(fix); const tFootHeight = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height; GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Min', 'Max'], ['0', '20,000']); - GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, grid.defaultSummaryHeight); - expect(tFootHeight).toBe(3 * grid.defaultSummaryHeight); + GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, DEFAULT_SUMMARY_HEIGHT); + expect(tFootHeight).toBe(3 * DEFAULT_SUMMARY_HEIGHT); }); it('should have summary per each column that \'hasSummary\'= true', () => { @@ -523,7 +524,7 @@ describe('IgxGrid - Summaries #grid', () => { grid.summaryRowHeight = null; fix.detectChanges(); - const expectedHeight = GridSummaryFunctions.calcMaxSummaryHeight(grid.columnList, summaries, grid.defaultSummaryHeight); + const expectedHeight = GridSummaryFunctions.calcMaxSummaryHeight(grid.columnList, summaries, DEFAULT_SUMMARY_HEIGHT); expect(tfootSize).toBe(expectedHeight); }); @@ -544,7 +545,7 @@ describe('IgxGrid - Summaries #grid', () => { const summaries = fix.debugElement.queryAll(By.css(SUMMARY_CELL)).filter((el) => el.nativeElement.classList.contains(EMPTY_SUMMARY_CLASS) === false); const tfootSize = GridSummaryFunctions.getRootSummaryRow(fix).nativeElement.getBoundingClientRect().height; - const expectedHeight = GridSummaryFunctions.calcMaxSummaryHeight(grid.columnList, summaries, grid.defaultSummaryHeight); + const expectedHeight = GridSummaryFunctions.calcMaxSummaryHeight(grid.columnList, summaries, DEFAULT_SUMMARY_HEIGHT); expect(tfootSize).toBe(expectedHeight); grid.getColumnByName('ProductName').hasSummary = false; @@ -796,14 +797,14 @@ describe('IgxGrid - Summaries #grid', () => { it('Hiding: should recalculate summary area after column with enabled summary is hidden', fakeAsync(() => { grid.summaryRowHeight = undefined; let tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height; - expect(tFoot).toEqual(5 * grid.defaultSummaryHeight); + expect(tFoot).toEqual(5 * DEFAULT_SUMMARY_HEIGHT); grid.getColumnByName('UnitsInStock').hidden = true; tick(); fix.detectChanges(); tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height; - expect(tFoot).toEqual(3 * grid.defaultSummaryHeight); + expect(tFoot).toEqual(3 * DEFAULT_SUMMARY_HEIGHT); expect(grid.hasSummarizedColumns).toBe(true); let summaryRow = fix.debugElement.query(By.css(SUMMARY_ROW)); @@ -820,7 +821,7 @@ describe('IgxGrid - Summaries #grid', () => { expect(grid.hasSummarizedColumns).toBe(true); tFoot = GridFunctions.getGridFooterWrapper(fix).nativeElement.getBoundingClientRect().height; - expect(tFoot).toEqual(5 * grid.defaultSummaryHeight); + expect(tFoot).toEqual(5 * DEFAULT_SUMMARY_HEIGHT); summaryRow = fix.debugElement.query(By.css(SUMMARY_ROW)); GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, [], []); GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count'], ['10']); @@ -1904,7 +1905,7 @@ describe('IgxGrid - Summaries #grid', () => { grid.getColumnByName('ParentID').hasSummary = false; fix.detectChanges(); - GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, grid.defaultSummaryHeight); + GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, DEFAULT_SUMMARY_HEIGHT); let summaries = GridSummaryFunctions.getAllVisibleSummaries(fix); summaries.forEach(summary => { @@ -1927,7 +1928,7 @@ describe('IgxGrid - Summaries #grid', () => { fix.detectChanges(); expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(5); - GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 1, grid.defaultSummaryHeight); + GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 1, DEFAULT_SUMMARY_HEIGHT); summaries = GridSummaryFunctions.getAllVisibleSummaries(fix); summaries.forEach(summary => { GridSummaryFunctions.verifyColumnSummaries(summary, 0, [], []); @@ -2110,7 +2111,7 @@ describe('IgxGrid - Summaries #grid', () => { grid.summaryRowHeight = 0; fix.detectChanges(); - GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, grid.defaultSummaryHeight); + GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 3, DEFAULT_SUMMARY_HEIGHT); let summaries = GridSummaryFunctions.getAllVisibleSummaries(fix); @@ -2134,7 +2135,7 @@ describe('IgxGrid - Summaries #grid', () => { fix.detectChanges(); expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(5); - GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 1, grid.defaultSummaryHeight); + GridSummaryFunctions.verifyVisibleSummariesHeight(fix, 1, DEFAULT_SUMMARY_HEIGHT); summaries = GridSummaryFunctions.getAllVisibleSummaries(fix); summaries.forEach(summary => { GridSummaryFunctions.verifyColumnSummaries(summary, 0, [], []); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index 6455939c5d9..5607605705e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -36,6 +36,7 @@ describe('IgxGrid Component Tests #grid', () => { const TBODY_CLASS = '.igx-grid__tbody-content'; const THEAD_CLASS = '.igx-grid-thead'; + const DEFAULT_SUMMARY_HEIGHT = 36; configureTestSuite(); @@ -290,8 +291,8 @@ describe('IgxGrid Component Tests #grid', () => { expect(grid.defaultRowHeight).toBe(50); expect(headerHight.offsetHeight).toBe(grid.defaultRowHeight); expect(rowHeight.offsetHeight).toBe(51); - expect(summaryItemHeight.offsetHeight).toBe(grid.defaultSummaryHeight - 1); - expect(summaryRowHeight.offsetHeight).toBe(grid.defaultSummaryHeight); + expect(summaryItemHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT - 1); + expect(summaryRowHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT); setElementSize(grid.nativeElement, Size.Medium) grid.summaryRowHeight = null; fixture.detectChanges(); @@ -302,8 +303,8 @@ describe('IgxGrid Component Tests #grid', () => { expect(grid.defaultRowHeight).toBe(40); expect(headerHight.offsetHeight).toBe(grid.defaultRowHeight); expect(rowHeight.offsetHeight).toBe(41); - expect(summaryItemHeight.offsetHeight).toBe(grid.defaultSummaryHeight - 1); - expect(summaryRowHeight.offsetHeight).toBe(grid.defaultSummaryHeight); + expect(summaryItemHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT - 1); + expect(summaryRowHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT); setElementSize(grid.nativeElement, Size.Small) grid.summaryRowHeight = undefined; fixture.detectChanges(); @@ -314,8 +315,8 @@ describe('IgxGrid Component Tests #grid', () => { expect(grid.defaultRowHeight).toBe(32); expect(headerHight.offsetHeight).toBe(grid.defaultRowHeight); expect(rowHeight.offsetHeight).toBe(33); - expect(summaryItemHeight.offsetHeight).toBe(grid.defaultSummaryHeight - 1); - expect(summaryRowHeight.offsetHeight).toBe(grid.defaultSummaryHeight); + expect(summaryItemHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT - 1); + expect(summaryRowHeight.offsetHeight).toBe(DEFAULT_SUMMARY_HEIGHT); }); it ('checks if attributes are correctly assigned when grid has or does not have data', fakeAsync( () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts index edb74f3652c..c3a3e5edbb9 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts @@ -33,7 +33,6 @@ export class IgxGridSummaryPipe implements PipeTransform { private addSummaryRows(gridId: string, collection: IGroupByResult, summaryPosition: GridSummaryPosition, showSummary): any[] { const recordsWithSummary = []; const lastChildMap = new Map(); - const maxSummaryHeight = this.grid.summaryService.calcMaxSummaryHeight(); if (collection.metadata.length && !this.grid.isGroupByRecord(collection.data[0]) && this.grid.isGroupByRecord(collection.metadata[0]) && summaryPosition === GridSummaryPosition.bottom) { @@ -67,8 +66,7 @@ export class IgxGridSummaryPipe implements PipeTransform { const records = this.removeDeletedRecord(this.grid, groupByRecord.records.slice()); const summaries = this.grid.summaryService.calculateSummaries(recordId, records); const summaryRecord: ISummaryRecord = { - summaries, - max: maxSummaryHeight + summaries }; recordsWithSummary.push(summaryRecord); } @@ -80,8 +78,7 @@ export class IgxGridSummaryPipe implements PipeTransform { const records = this.removeDeletedRecord(this.grid, groupRecord.records.slice()); const summaries = this.grid.summaryService.calculateSummaries(groupRecordId, records, groupRecord); const summaryRecord: ISummaryRecord = { - summaries, - max: maxSummaryHeight + summaries }; recordsWithSummary.push(summaryRecord); } @@ -96,8 +93,7 @@ export class IgxGridSummaryPipe implements PipeTransform { const records = this.removeDeletedRecord(this.grid, groupByRecord.records.slice()); const summaries = this.grid.summaryService.calculateSummaries(recordId, records, groupByRecord); const summaryRecord: ISummaryRecord = { - summaries, - max: maxSummaryHeight + summaries }; recordsWithSummary.push(summaryRecord); } else if (summaryPosition === GridSummaryPosition.bottom) { diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts index 77b686f5836..d5a7b12ca44 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts @@ -32,6 +32,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { const FILTERING_ROW_CLASS = 'igx-grid-filtering-row'; const FILTERING_CELL_CLASS = 'igx-grid-filtering-cell'; + const DEFAULT_SUMMARY_HEIGHT = 36; configureTestSuite(); @@ -497,8 +498,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { let tFoot = hierarchicalGrid.nativeElement.querySelector('.igx-grid__tfoot'); let childTFoot = childGrid.nativeElement.querySelector('.igx-grid__tfoot'); - expect(tFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight); - expect(childTFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight); + expect(tFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT); + expect(childTFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT); setElementSize(hierarchicalGrid.nativeElement, Size.Medium) @@ -510,8 +511,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { tFoot = hierarchicalGrid.nativeElement.querySelectorAll('.igx-grid__tfoot')[1]; childTFoot = childGrid.nativeElement.querySelector('.igx-grid__tfoot'); - expect(tFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight); - expect(childTFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight); + expect(tFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT); + expect(childTFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT); setElementSize(hierarchicalGrid.nativeElement, Size.Small) hierarchicalGrid.summaryRowHeight = 0; @@ -522,8 +523,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { tFoot = hierarchicalGrid.nativeElement.querySelectorAll('.igx-grid__tfoot')[1]; childTFoot = childGrid.nativeElement.querySelector('.igx-grid__tfoot'); - expect(tFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight); - expect(childTFoot.getBoundingClientRect().height).toBe(hierarchicalGrid.defaultSummaryHeight); + expect(tFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT); + expect(childTFoot.getBoundingClientRect().height).toBe(DEFAULT_SUMMARY_HEIGHT); }) it('should render summaries for column inside a column group.', fakeAsync(() => { diff --git a/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.service.ts b/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.service.ts index 2f3977d53ec..af8461e4826 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.service.ts +++ b/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.service.ts @@ -89,13 +89,8 @@ export class IgxGridSummaryService { } } - public calcMaxSummaryHeight() { - if (this.summaryHeight) { - return this.summaryHeight; - } - if (!this.grid.data) { - return this.summaryHeight = 0; - } + + protected getMaxSummaryLength() { let maxSummaryLength = 0; this.grid.columns.filter((col) => col.hasSummary && !col.hidden).forEach((column) => { const getCurrentSummary = column.summaries.operate([], [], column.field); @@ -108,12 +103,12 @@ export class IgxGridSummaryService { } }); this.maxSummariesLength = maxSummaryLength; - this.summaryHeight = maxSummaryLength * this.grid.defaultSummaryHeight; - return this.summaryHeight; + return maxSummaryLength; } public calculateSummaries(rowID, data, groupRecord) { let rowSummaries = this.summaryCacheMap.get(rowID); + const maxSummaryLength = this.getMaxSummaryLength(); if (!rowSummaries) { rowSummaries = new Map(); this.summaryCacheMap.set(rowID, rowSummaries); @@ -123,7 +118,7 @@ export class IgxGridSummaryService { return rowSummaries; } - this.grid.columns.filter(col => col.hasSummary).forEach((column) => { + this.grid.columns.forEach((column) => { if (!rowSummaries.get(column.field)) { let summaryResult = column.summaries.operate( data.map(r => resolveNestedPath(r, column.field)), @@ -140,8 +135,14 @@ export class IgxGridSummaryService { rowSummaries.set(column.field, summaryResult); } + const summaries = rowSummaries.get(column.field); + // fill in empty summaries till DOM is filled to the max summary length + if (summaries.length < maxSummaryLength){ + for (let index = summaries.length; index < maxSummaryLength; index++) { + summaries.push({}); + } + } }); - return rowSummaries; } diff --git a/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.ts b/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.ts index 2fb2f866fd1..dc01001ae77 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.ts +++ b/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.ts @@ -32,7 +32,6 @@ export interface IgxSummaryResult { export interface ISummaryRecord { summaries: Map; - max?: number; cellIndentation?: number; } diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html index f8f6c00aa31..ebb93e447bb 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html @@ -1,14 +1,14 @@ -@if (hasSummary) { - - -} + + @for (summary of summaryResults; track trackSummaryResult(summary)) { -
- {{ translateSummary(summary) }} - - {{ formatSummaryResult(summary) }} - +
+ @if (hasSummary) { + {{ translateSummary(summary) }} + + {{ formatSummaryResult(summary) }} + + }
} diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts index 8f4da37f72e..e5696e0a619 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts @@ -88,10 +88,6 @@ export class IgxSummaryCellComponent { return this.column.dataType; } - public get itemHeight() { - return this.column.grid.defaultSummaryHeight; - } - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts index 54bb4acb800..a99d3477fd7 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts @@ -40,7 +40,6 @@ export class IgxTreeGridSummaryPipe implements PipeTransform { const summaries = grid.summaryService.calculateSummaries(record.key, childData); const summaryRecord: ISummaryRecord = { summaries, - max: maxSummaryHeight, cellIndentation: record.level + 1 }; recordsWithSummary.push(summaryRecord); @@ -59,7 +58,6 @@ export class IgxTreeGridSummaryPipe implements PipeTransform { const summaries = grid.summaryService.calculateSummaries(parent.key, childData); const summaryRecord: ISummaryRecord = { summaries, - max: maxSummaryHeight, cellIndentation: parent.level + 1 }; recordsWithSummary.push(summaryRecord); @@ -76,7 +74,6 @@ export class IgxTreeGridSummaryPipe implements PipeTransform { const summaries = grid.summaryService.calculateSummaries(record.key, childData); const summaryRecord: ISummaryRecord = { summaries, - max: maxSummaryHeight, cellIndentation: record.level + 1 }; recordsWithSummary.push(summaryRecord);