From bf5c1d7b1e39235055a828ec913cc8e5f20d9d01 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 25 Mar 2025 16:49:50 +0200 Subject: [PATCH 01/10] chore(grid): Refactor how body height is calculated. --- .../styles/components/grid/_grid-theme.scss | 4 +- .../src/lib/grids/grid-base.directive.ts | 68 ++----------------- .../src/lib/grids/grid/grid.component.ts | 7 -- .../hierarchical-grid.component.ts | 4 +- .../grids/tree-grid/tree-grid.component.ts | 7 -- 5 files changed, 12 insertions(+), 78 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 379581b5914..4587e716deb 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1307,9 +1307,10 @@ %grid-tbody-container { position: relative; - display: flex; + display: grid; grid-row: 4; overflow: hidden; + grid-template-rows: 1fr; } %grid-tbody-message { @@ -1361,6 +1362,7 @@ background: var-get($theme, 'content-background'); border-inline-start: rem(1px) solid var-get($theme, 'row-border-color'); position: relative; + grid-column: 2 } %grid-tbody-scrollbar-start { 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 0b346c079b5..a3cd218a247 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6893,59 +6893,12 @@ export abstract class IgxGridBaseDirective implements GridType, } } - /** - * @hidden - */ - protected getGroupAreaHeight(): number { - return 0; - } - /** * @hidden */ protected getComputedHeight(elem) { return elem.offsetHeight ? parseFloat(this.document.defaultView.getComputedStyle(elem).getPropertyValue('height')) : 0; } - /** - * @hidden - */ - protected getFooterHeight(): number { - return this.summaryRowHeight || this.getComputedHeight(this.tfoot.nativeElement); - } - /** - * @hidden - */ - protected getTheadRowHeight(): number { - // D.P.: Before CSS loads,theadRow computed height will be 'auto'->NaN, so use 0 fallback - const height = this.getComputedHeight(this.theadRow.nativeElement) || 0; - return (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ? - height - this.getFilterCellHeight() : - height; - } - - /** - * @hidden - */ - protected getToolbarHeight(): number { - let toolbarHeight = 0; - if (this.toolbar.first) { - toolbarHeight = this.getComputedHeight(this.toolbar.first.nativeElement); - } - return toolbarHeight; - } - - /** - * @hidden - */ - protected getPagingFooterHeight(): number { - let pagingHeight = 0; - if (this.footer) { - const height = this.getComputedHeight(this.footer.nativeElement); - pagingHeight = this.footer.nativeElement.firstElementChild ? - height : 0; - } - return pagingHeight; - } /** * @hidden @@ -6965,21 +6918,12 @@ export abstract class IgxGridBaseDirective implements GridType, if (!this._height) { return null; } - const actualTheadRow = this.getTheadRowHeight(); - const footerHeight = this.getFooterHeight(); - const toolbarHeight = this.getToolbarHeight(); - const pagingHeight = this.getPagingFooterHeight(); - const groupAreaHeight = this.getGroupAreaHeight(); - const scrHeight = this.getComputedHeight(this.scr.nativeElement); - const renderedHeight = toolbarHeight + actualTheadRow + - footerHeight + pagingHeight + groupAreaHeight + - scrHeight; let gridHeight = 0; if (this.isPercentHeight) { const computed = this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('height'); - const autoSize = this._shouldAutoSize(renderedHeight); + const autoSize = this._shouldAutoSize(); if (autoSize || computed.indexOf('%') !== -1) { const bodyHeight = this.getDataBasedBodyHeight(); return bodyHeight > 0 ? bodyHeight : null; @@ -6988,7 +6932,7 @@ export abstract class IgxGridBaseDirective implements GridType, } else { gridHeight = parseInt(this._height, 10); } - const height = Math.abs(gridHeight - renderedHeight); + const height = this.getComputedHeight(this.tbodyContainer.nativeElement) || 0; if (Math.round(height) === 0 || isNaN(gridHeight)) { const bodyHeight = this.defaultTargetBodyHeight; @@ -7006,12 +6950,14 @@ export abstract class IgxGridBaseDirective implements GridType, return origHeight !== height; } - protected _shouldAutoSize(renderedHeight) { - this.tbody.nativeElement.style.display = 'none'; + protected _shouldAutoSize() { + const parentElement = this.nativeElement.parentElement || (this.nativeElement.getRootNode() as any).host; + const parentHeight = parentElement.clientHeight; + this.tbody.nativeElement.style.display = 'none'; let res = !parentElement || parentElement.clientHeight === 0 || - parentElement.clientHeight === renderedHeight; + parentElement.clientHeight !== parentHeight; if (parentElement && (res || this._autoSize)) { // If grid causes the parent container to extend (for example when container is flex) // we should always auto-size since the actual size of the container will continuously change as the grid renders elements. diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 07d3b4cdb9b..deff3db35a7 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1270,13 +1270,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, this.paginator ? Math.min(allItems, this.perPage) : allItems); } - /** - * @hidden @internal - */ - protected override getGroupAreaHeight(): number { - return this.groupArea ? this.getComputedHeight(this.groupArea.nativeElement) : 0; - } - /** * @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index a06f2a229f7..0dbab69c465 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -1159,11 +1159,11 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti }); } - protected override _shouldAutoSize(renderedHeight) { + protected override _shouldAutoSize() { if (this.isPercentHeight && this.parent) { return true; } - return super._shouldAutoSize(renderedHeight); + return super._shouldAutoSize(); } private updateColumnList(recalcColSizes = true) { diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts index a36bdc1af15..930d2d59529 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts @@ -1067,13 +1067,6 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy super.initColumns(collection, cb); } - /** - * @hidden @internal - */ - protected override getGroupAreaHeight(): number { - return this.treeGroupArea ? this.getComputedHeight(this.treeGroupArea.nativeElement) : 0; - } - /** {@link triggerPipes} will re-create pinnedData on CRUD operations */ protected trackPinnedRowData(record: ITreeGridRecord) { // TODO FIX: pipeline data doesn't match end interface (¬_¬ ) From 4fb94dea20001a5122c5e754e42f1b0a4473edcc Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 26 Mar 2025 11:35:33 +0200 Subject: [PATCH 02/10] chore(*): Refactor tbody width calculations. --- .../src/lib/grids/grid-base.directive.ts | 11 ++--------- .../src/lib/grids/grid/grid.component.html | 2 +- 2 files changed, 3 insertions(+), 10 deletions(-) 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 a3cd218a247..707584a4abf 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6498,16 +6498,12 @@ export abstract class IgxGridBaseDirective implements GridType, if (this.isPercentWidth) { /* width in %*/ - const computed = this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'); - width = computed.indexOf('%') === -1 ? parseFloat(computed) : null; + const computed = this.document.defaultView.getComputedStyle(this.tbody.nativeElement).getPropertyValue('width'); + width = parseFloat(computed); } else { width = parseInt(this.width, 10); } - if (!width && this.nativeElement) { - width = this.nativeElement.offsetWidth; - } - if (this.width === null || !width) { this.isColumnWidthSum = true; @@ -6516,9 +6512,6 @@ export abstract class IgxGridBaseDirective implements GridType, this.isColumnWidthSum = false; } - if (this.hasVerticalScroll() && this.width !== null) { - width -= this.scrollSize; - } if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) { this.calcWidth = width; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 900ac1c9572..0b9a71258fb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -34,7 +34,7 @@
+ [style.height.px]="totalHeight" #tbody [attr.aria-activedescendant]="activeDescendant"> @if (moving && columnInDrag && pinnedColumns.length <= 0) { Date: Thu, 27 Mar 2025 13:55:26 +0200 Subject: [PATCH 03/10] chore(*): Add check in case parent element is undefined. --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 895fe421b79..a61aa62c3c2 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6959,7 +6959,7 @@ export abstract class IgxGridBaseDirective implements GridType, protected _shouldAutoSize() { const parentElement = this.nativeElement.parentElement || (this.nativeElement.getRootNode() as any).host; - const parentHeight = parentElement.clientHeight; + const parentHeight = parentElement?.clientHeight; this.tbody.nativeElement.style.display = 'none'; let res = !parentElement || parentElement.clientHeight === 0 || From 2ed8393a58b9d6b6c90e55bee48e908baea893c8 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 27 Mar 2025 16:05:53 +0200 Subject: [PATCH 04/10] chore(*): Set back the subtraction of scrollsize. --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 3 +++ 1 file changed, 3 insertions(+) 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 a61aa62c3c2..63c8e36f815 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6525,6 +6525,9 @@ export abstract class IgxGridBaseDirective implements GridType, this.isColumnWidthSum = false; } + if (this.hasVerticalScroll() && this.width !== null) { + width -= this.scrollSize; + } if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) { this.calcWidth = width; } From 04b3115045541735865a75e7dbaf75de7966c0e0 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 27 Mar 2025 17:46:30 +0200 Subject: [PATCH 05/10] chore(*): Consider fixed grid height when calc size in case container is hidden. --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 63c8e36f815..1b090399b64 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6941,7 +6941,7 @@ export abstract class IgxGridBaseDirective implements GridType, } else { gridHeight = parseInt(this._height, 10); } - const height = this.getComputedHeight(this.tbodyContainer.nativeElement) || 0; + const height = this.getComputedHeight(this.tbodyContainer.nativeElement) || gridHeight || 0; if (Math.round(height) === 0 || isNaN(gridHeight)) { const bodyHeight = this.defaultTargetBodyHeight; From 66887d40d1474f060a302b0a467143be6aa5e7df Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 27 Mar 2025 18:06:26 +0200 Subject: [PATCH 06/10] chore(*): Apply same chanegs to other grids. --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- .../grids/hierarchical-grid/hierarchical-grid.component.html | 2 +- .../src/lib/grids/pivot-grid/pivot-grid.component.html | 2 +- .../src/lib/grids/tree-grid/tree-grid.component.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) 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 1b090399b64..518d1f2186c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6525,7 +6525,7 @@ export abstract class IgxGridBaseDirective implements GridType, this.isColumnWidthSum = false; } - if (this.hasVerticalScroll() && this.width !== null) { + if (!this.isPercentWidth && this.hasVerticalScroll() && this.width !== null) { width -= this.scrollSize; } if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) { diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index 962169bcf4d..46b2f313cd1 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -20,7 +20,7 @@
+ [style.height.px]="totalHeight" #tbody (scroll)="preventContainerScroll($event)"> @if (moving && columnInDrag && pinnedColumns.length <= 0) { + [style.height.px]="totalHeight" #tbody [attr.aria-activedescendant]="activeDescendant"> @if (hasMovableColumns && columnInDrag && pinnedColumns.length <= 0) { diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index 5983eb81ffa..c188ff237b4 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -19,7 +19,7 @@
+ [style.height.px]='totalHeight' #tbody (scroll)='preventContainerScroll($event)'> @if (moving && columnInDrag && pinnedColumns.length <= 0) { Date: Mon, 31 Mar 2025 14:15:35 +0300 Subject: [PATCH 07/10] chore(*): Fix pivot grid width calculations and remove some fixed px sizes. --- .../core/styles/components/grid/_grid-theme.scss | 14 +++++++------- .../lib/grids/pivot-grid/pivot-grid.component.ts | 6 ++++++ .../pivot-grid/pivot-header-row.component.html | 12 ++++++------ 3 files changed, 19 insertions(+), 13 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 082844d6c96..b07aad9e159 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1303,14 +1303,14 @@ overflow: hidden; z-index: 1; outline-style: none; + flex-grow: 1; } %grid-tbody-container { position: relative; - display: grid; + display: flex; grid-row: 4; overflow: hidden; - grid-template-rows: 1fr; } %grid-tbody-message { @@ -2086,7 +2086,7 @@ .sort-icon { color: var-get($theme, 'header-selected-text-color'); - + ::after { background: var-get($theme, 'header-selected-background'); } @@ -2114,7 +2114,7 @@ &%igx-grid-th--sorted { .sort-icon { color: var-get($theme, 'header-selected-text-color'); - + > igx-icon { color: inherit; } @@ -2122,7 +2122,7 @@ &:focus, &:hover { color: var-get($theme, 'header-selected-text-color'); - + > igx-icon { color: inherit; } @@ -2179,14 +2179,14 @@ .sort-icon { opacity: 1; color: var-get($theme, 'sorted-header-icon-color'); - + > igx-icon { color: inherit; } &:hover { color: var-get($theme, 'sortable-header-icon-hover-color'); - + > igx-icon { color: inherit; } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index b4fea8db86b..d77dfc4a18a 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -2517,4 +2517,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni this.regroupTrigger++; } } + + protected override getUnpinnedWidth(takeHidden = false) { + return this.isPercentWidth ? + this.calcWidth : + super.getUnpinnedWidth(takeHidden); + } } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html index b238803b861..6218b134207 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html @@ -1,6 +1,6 @@ -
-
-
+
+
+
@if (grid.pivotUI.showConfiguration) {
-
-
+
@if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {
From d75348bb9da82987427654e42b2d9388ed57a929 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 31 Mar 2025 16:21:00 +0300 Subject: [PATCH 08/10] chore(*): Fix col group sizes and tests. --- .../styles/components/grid/_grid-theme.scss | 1 + .../src/lib/grids/grid/column-group.spec.ts | 30 +++++++++---------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index b07aad9e159..25bae775955 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -1304,6 +1304,7 @@ z-index: 1; outline-style: none; flex-grow: 1; + width: 100%; } %grid-tbody-container { diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts index 9e25636960f..9c6d27229c3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts @@ -459,10 +459,10 @@ describe('IgxGrid - multi-column headers #grid', () => { const locationColGroup = getColGroup(grid, 'Location'); const gridWidthInPx = ((parseInt(gridWidth, 10) / 100) * - parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollSize) + 'px'; - expect(locationColGroup.width).toBe(gridWidthInPx); + parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollSize); + expect((parseFloat(locationColGroup.width))).toBeCloseTo(gridWidthInPx, 0); const cityColumn = grid.getColumnByName('City'); - expect(cityColumn.width).toBe(gridWidthInPx); + expect(parseFloat(cityColumn.width)).toBeCloseTo(gridWidthInPx, 0); }); it('Width should be correct. Column group with column. Column width in px.', () => { @@ -554,13 +554,13 @@ describe('IgxGrid - multi-column headers #grid', () => { const colWidth = gridWidthInPx / 3; const colWidthPx = colWidth + 'px'; const locationColGroup = getColGroup(grid, 'Location'); - expect(locationColGroup.width).toBe(colWidth * 3 + 'px'); + expect((parseFloat(locationColGroup.width))).toBeCloseTo(colWidth * 3, 0); const countryColumn = grid.getColumnByName('Country'); - expect(countryColumn.width).toBe(colWidthPx); + expect(parseFloat(countryColumn.width)).toBeCloseTo(colWidth, 0); const regionColumn = grid.getColumnByName('Region'); - expect(regionColumn.width).toBe(colWidthPx); + expect(parseFloat(regionColumn.width)).toBeCloseTo(colWidth, 0); const cityColumn = grid.getColumnByName('City'); - expect(cityColumn.width).toBe(colWidthPx); + expect(parseFloat(cityColumn.width)).toBeCloseTo(colWidth, 0); }); it('Width should be correct. Column group with three columns. Columns with mixed width - px and percent.', async () => { @@ -576,8 +576,8 @@ describe('IgxGrid - multi-column headers #grid', () => { // check group has correct size. let locationColGroup = getColGroup(grid, 'Location'); - let expectedWidth = (200 + grid.calcWidth * 0.7) + 'px'; - expect(locationColGroup.width).toBe(expectedWidth); + let expectedWidth = (200 + grid.calcWidth * 0.7); + expect(parseFloat(locationColGroup.width)).toBeCloseTo(expectedWidth, 0); // check header and content have same size. const col1Header = grid.getColumnByName('Country').headerCell.nativeElement; @@ -600,8 +600,8 @@ describe('IgxGrid - multi-column headers #grid', () => { fixture.detectChanges(); locationColGroup = getColGroup(grid, 'Location'); - expectedWidth = (200 + grid.calcWidth * 0.7) + 'px'; - expect(locationColGroup.width).toBe(expectedWidth); + expectedWidth = (200 + grid.calcWidth * 0.7); + expect(parseFloat(locationColGroup.width)).toBeCloseTo(expectedWidth, 0); col2Header = grid.getColumnByName('Region').headerCell.nativeElement; cell2 = (grid.gridAPI.get_row_by_index(0).cells as QueryList).toArray()[1].nativeElement; @@ -654,13 +654,13 @@ describe('IgxGrid - multi-column headers #grid', () => { const colWidth = gridWidthInPx / 3; const colWidthPx = colWidth + 'px'; const locationColGroup = getColGroup(grid, 'Location'); - expect(locationColGroup.width).toBe((colWidth * 3) + 'px'); + expect(parseFloat(locationColGroup.width)).toBeCloseTo((colWidth * 3), 0); const countryColumn = grid.getColumnByName('Country'); - expect(countryColumn.width).toBe(colWidthPx); + expect((parseFloat(countryColumn.width))).toBeCloseTo(colWidth, 0); const regionColumn = grid.getColumnByName('Region'); - expect(regionColumn.width).toBe(colWidthPx); + expect(parseFloat(regionColumn.width)).toBeCloseTo(colWidth, 0); const cityColumn = grid.getColumnByName('City'); - expect(cityColumn.width).toBe(colWidthPx); + expect((parseFloat(cityColumn.width))).toBeCloseTo(colWidth, 0); }); it('Width should be correct. Column group with three columns. Column width in px.', () => { From a1c6635b4402c242a7829ac56cd09f7bd0a935d1 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 31 Mar 2025 17:13:25 +0300 Subject: [PATCH 09/10] chore(*): Fix a few more tests. --- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- .../src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts | 6 +++--- .../grids/grid/grid.multi-row-layout.integration.spec.ts | 2 +- .../lib/grids/hierarchical-grid/hierarchical-grid.spec.ts | 4 +++- 4 files changed, 8 insertions(+), 6 deletions(-) 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 518d1f2186c..d439786d7c3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6512,7 +6512,7 @@ export abstract class IgxGridBaseDirective implements GridType, if (this.isPercentWidth) { /* width in %*/ const computed = this.document.defaultView.getComputedStyle(this.tbody.nativeElement).getPropertyValue('width'); - width = parseFloat(computed); + width = computed.indexOf('%') === -1 ? parseFloat(computed) : null; } else { width = parseInt(this.width, 10); } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts index b9ba2d1ae66..8cbacca04c8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts @@ -2068,7 +2068,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { expect(lastCell.active).toBe(true); expect(grid.headerContainer.getScroll().scrollLeft).toBeGreaterThan(800); let diff = lastCell.nativeElement.getBoundingClientRect().right - grid.tbody.nativeElement.getBoundingClientRect().right; - expect(diff).toBe(0); + expect(Math.ceil(diff)).toBe(0); // ctrl+arrow left GridFunctions.simulateGridContentKeydown(fix, 'ArrowLeft', false, false, true); @@ -2581,7 +2581,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { // check if cell right edge is visible diff = cell.nativeElement.getBoundingClientRect().right - grid.tbody.nativeElement.getBoundingClientRect().right; await wait(); - expect(diff).toBe(0); + expect(Math.ceil(diff)).toBe(0); // navigate left to cell in column that is in DOM but is not in view col = grid.getColumnByName('CompanyName'); @@ -2614,7 +2614,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { expect(grid.headerContainer.getScroll().scrollLeft).toBeGreaterThan(250); // check if cell right right is visible diff = cell.nativeElement.getBoundingClientRect().right - grid.tbody.nativeElement.getBoundingClientRect().right; - expect(diff).toBe(0); + expect(Math.ceil(diff)).toBe(0); }); }); }); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts index 355a3db62a4..787ef3bc81c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts @@ -316,7 +316,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(lastCell.column.field).toBe('Address'); expect(lastCell.column.parent.field).toBe('group4'); expect(lastCell.nativeElement.getBoundingClientRect().right) - .toEqual(grid.tbody.nativeElement.getBoundingClientRect().right); + .toBeCloseTo(grid.tbody.nativeElement.getBoundingClientRect().right, 0); }); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index ca4d8382731..178bda8c215 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -555,7 +555,9 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; - expect(childGrid.calcWidth - 370 - childGrid.scrollSize).toBeLessThanOrEqual(5); + // child should be parent width - the child grid indentations + var indents = window.getComputedStyle(fixture.debugElement.queryAll(By.css('.igx-grid__hierarchical-indent'))[0].nativeElement); + expect(childGrid.calcWidth).toBe(parseFloat(hierarchicalGrid.width) - parseFloat(indents.marginLeft) - parseFloat(indents.marginRight)); hierarchicalGrid.clearFilter(); // Required to recalculate and reflect child grid size From 6be299a2ab67ae0a6b8e131a3aad102be4f86f58 Mon Sep 17 00:00:00 2001 From: Maya Date: Wed, 25 Jun 2025 10:31:39 +0300 Subject: [PATCH 10/10] chore(*): Recalc and apply new min widths based on paddings. (#15642) --- .../src/lib/grids/columns/column.component.ts | 11 ++----- .../src/lib/grids/grid-base.directive.ts | 30 ++++++++----------- .../lib/grids/grid/column-resizing.spec.ts | 6 ++-- .../grids/pivot-grid/pivot-grid.component.ts | 4 +-- 4 files changed, 22 insertions(+), 29 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 3482a5076f1..bcf660006d0 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -63,6 +63,7 @@ const DEFAULT_DATE_FORMAT = 'mediumDate'; const DEFAULT_TIME_FORMAT = 'mediumTime'; const DEFAULT_DATE_TIME_FORMAT = 'medium'; const DEFAULT_DIGITS_INFO = '1.0-3'; +const CELL_CONTENT_MIN = 32; /* blazorElement */ /* contentParent: ColumnGroup */ @@ -1234,14 +1235,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy if (!this.grid) { return '80'; } - switch (this.grid.gridSize) { - case Size.Medium: - return '64'; - case Size.Small: - return '56'; - default: - return '80'; - } + // the paddings + the min allowed cell content + return (this.grid.defaultHeaderGroupMinWidth + CELL_CONTENT_MIN).toString(); } /** * Returns a reference to the `summaryTemplate`. 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 fd57d90ee2f..cdc50be9ec9 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3228,7 +3228,7 @@ export abstract class IgxGridBaseDirective implements GridType, private overlayIDs = []; private _sortingStrategy: IGridSortingStrategy; private _pinning: IPinningConfig = { columns: ColumnPinningPosition.Start }; - private _shouldRecalcRowHeight = false; + private _shouldRecalcDefaultSizes = false; private _hostWidth; private _advancedFilteringOverlayId: string; @@ -3302,6 +3302,7 @@ export abstract class IgxGridBaseDirective implements GridType, private _sortDescendingHeaderIconTemplate: TemplateRef = null; private _gridSize: Size = Size.Large; private _defaultRowHeight = 50; + private _defaultCellPadding = 48; /** * @hidden @internal @@ -3720,7 +3721,7 @@ export abstract class IgxGridBaseDirective implements GridType, if (this.shouldResize) { // resizing occurs due to the change of --ig-size css var this._gridSize = this.gridSize; - this.updateDefaultRowHeight(); + this.updateDefaultSizes(); this._autoSize = this.isPercentHeight && this.calcHeight !== this.getDataBasedBodyHeight(); this.crudService.endEdit(false); if (this._summaryRowHeight === 0) { @@ -3956,7 +3957,7 @@ export abstract class IgxGridBaseDirective implements GridType, */ public dataRebinding(event: IForOfDataChangeEventArgs) { if (event.state.chunkSize == 0) { - this._shouldRecalcRowHeight = true; + this._shouldRecalcDefaultSizes = true; } this.dataChanging.emit(event); } @@ -3966,9 +3967,9 @@ export abstract class IgxGridBaseDirective implements GridType, */ public dataRebound(event: IForOfDataChangeEventArgs) { this.selectionService.clearHeaderCBState(); - if (this._shouldRecalcRowHeight) { - this._shouldRecalcRowHeight = false; - this.updateDefaultRowHeight(); + if (this._shouldRecalcDefaultSizes) { + this._shouldRecalcDefaultSizes = false; + this.updateDefaultSizes(); } this.dataChanged.emit(event); } @@ -4400,14 +4401,7 @@ export abstract class IgxGridBaseDirective implements GridType, * The values below depend on the header cell default right/left padding values. */ public get defaultHeaderGroupMinWidth(): number { - switch (this.gridSize) { - case Size.Medium: - return 32; - case Size.Small: - return 24; - default: - return 48; - } + return this._defaultCellPadding; } /** @hidden @internal */ @@ -7838,13 +7832,15 @@ export abstract class IgxGridBaseDirective implements GridType, this._lastSearchInfo.matchCount = this._lastSearchInfo.matchInfoCache.length; } - protected updateDefaultRowHeight() { + protected updateDefaultSizes() { if (this.dataRowList.length > 0 && this.dataRowList.first.cells && this.dataRowList.first.cells.length > 0) { const height = parseFloat(this.document.defaultView.getComputedStyle(this.dataRowList.first.cells.first.nativeElement)?.getPropertyValue('height')); - if (height) { + const padding = parseFloat(this.document.defaultView.getComputedStyle(this.dataRowList.first.cells.first.nativeElement)?.getPropertyValue('padding-left')); + if (height && padding) { this._defaultRowHeight = height; + this._defaultCellPadding = padding * 2; } else { - this._shouldRecalcRowHeight = true; + this._shouldRecalcDefaultSizes = true; } } } diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 98a1950e2a4..46fb7dc5147 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -199,9 +199,10 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { fixture.detectChanges(); expect(column.width).toEqual('80px'); - setElementSize(grid.nativeElement, Size.Medium) + setElementSize(grid.nativeElement, Size.Medium); tick(16); // needed because of the throttleTime of the resize obserer fixture.detectChanges(); + (grid as any).updateDefaultSizes(); expect(column.defaultMinWidth).toBe('64'); UIInteractions.simulateMouseEvent('mousedown', headerResArea, 80, 0); @@ -214,9 +215,10 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { fixture.detectChanges(); expect(column.width).toEqual('64px'); - setElementSize(grid.nativeElement, Size.Small) + setElementSize(grid.nativeElement, Size.Small); tick(16); // needed because of the throttleTime of the resize obserer fixture.detectChanges(); + (grid as any).updateDefaultSizes(); expect(column.defaultMinWidth).toBe('56'); UIInteractions.simulateMouseEvent('mousedown', headerResArea, 64, 0); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index d33e77930c8..e78418073de 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -2514,8 +2514,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni this.theadRow.nativeElement.offsetHeight; } - protected override updateDefaultRowHeight() { - super.updateDefaultRowHeight(); + protected override updateDefaultSizes() { + super.updateDefaultSizes(); if (this.hasHorizontalLayout) { // Trigger pipes to recalc heights for the horizontal layout mrl rows. this.regroupTrigger++;