From 23b3939903446047bc7cf7343459ddb0594c267c Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Tue, 8 Jul 2025 15:01:26 +0300 Subject: [PATCH 1/5] test(hgrid): add a test --- .../hierarchical-grid/hierarchical-grid.spec.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) 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 f0dd4cc9d53..100697489e7 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 @@ -668,6 +668,18 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { ); jasmine.getEnv().allowRespy(false); }); + + it('should calculate correct column headers width when rowSelection + expand indicators', () => { + hierarchicalGrid.rowSelection = 'multiple'; + fixture.detectChanges(); + + const headerRowElement = hierarchicalGrid.nativeElement.querySelector("igx-grid-header-row"); + const headerRowDiv = headerRowElement.querySelector(".igx-grid__tr"); + const headerRowChildren = Array.from(headerRowDiv.children); + + const elementsWidth = headerRowChildren.reduce((acc,el) => acc+(el as HTMLElement).offsetWidth, 0); + expect(elementsWidth).toEqual((headerRowDiv as HTMLElement).offsetWidth); + }); }); describe('IgxHierarchicalGrid Row Islands #hGrid', () => { @@ -1690,7 +1702,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); - let childGrid = hierarchicalGrid.gridAPI.getChildGrids()[0]; + const childGrid = hierarchicalGrid.gridAPI.getChildGrids()[0]; const childRow = childGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(childRow.expander); fixture.detectChanges(); From 4739eb5613321dcba891bdb18ca6f251801a7467 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Tue, 8 Jul 2025 16:23:40 +0300 Subject: [PATCH 2/5] fix(*): Add flex-grow and flex shrink so that the display container takes up the remaining space --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 1 + 1 file changed, 1 insertion(+) 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 aff507895e6..77589e735ae 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 @@ -1274,6 +1274,7 @@ %grid-display-container-tr { width: 100%; overflow: visible; + flex: 1; } %grid-mrl-block { From d73e3b7caa0d6159d60faabc4659afb190ddc683 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 25 Aug 2025 17:21:06 +0300 Subject: [PATCH 3/5] chore(*): Remove calculation of offset when pinning to the right side --- .../styles/components/grid/_grid-theme.scss | 1 + .../src/lib/grids/columns/column.component.ts | 7 ------- .../lib/grids/grid/grid-row.component.html | 2 -- .../src/lib/grids/grid/grid-row.component.ts | 6 ------ .../src/lib/grids/grid/grid.pinning.spec.ts | 19 ++++++++++++++----- .../headers/grid-header-row.component.html | 3 +-- .../hierarchical-row.component.html | 1 - .../pivot-header-row.component.html | 2 +- .../summaries/summary-row.component.html | 3 +-- .../tree-grid/tree-grid-row.component.html | 2 -- 10 files changed, 18 insertions(+), 28 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 77589e735ae..9630e2e3f6a 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 @@ -1275,6 +1275,7 @@ width: 100%; overflow: visible; flex: 1; + min-width: 0; // needed to override the min-width of the column headers } %grid-mrl-block { 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 641c2fb5a0c..e74278593e6 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -1596,13 +1596,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy return !this.grid.isPinningToStart && pinnedCols[0] === this; } - /** @hidden @internal **/ - public get rightPinnedOffset(): string { - return this.pinned && !this.grid.isPinningToStart ? - - this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' : - null; - } - /** @hidden @internal **/ public get gridRowSpan(): number { return this.rowEnd && this.rowStart ? this.rowEnd - this.rowStart : 1; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html index 7289bc16f29..9ad5f744f38 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html @@ -65,7 +65,6 @@
{ @@ -130,7 +130,7 @@ describe('IgxGrid - Column Pinning #grid', () => { expect(GridFunctions.isCellPinned(cell)).toBe(true); }); - it('should allow pinning/unpinning via the column API', () => { + it('should allow pinning/unpinning via the column API', () => { const col = grid.getColumnByName('ID'); col.pinned = true; @@ -569,7 +569,7 @@ describe('IgxGrid - Column Pinning #grid', () => { }); it('should correctly pin column to right when row selectors are enabled.', () => { - grid.rowSelection = GridSelectionMode.multiple; + grid.rowSelection = GridSelectionMode.multiple; fix.detectChanges(); // check row DOM @@ -692,9 +692,14 @@ describe('IgxGrid - Column Pinning #grid', () => { expect(grid.getColumnByName('CompanyName').isFirstPinned).toBeTruthy(); const row = grid.gridAPI.get_row_by_index(0).nativeElement; // check cells are rendered after main display container and have left offset + const headerRowDisplayContainer = fix.debugElement.query(By.directive(IgxGridHeaderRowComponent)).nativeElement.querySelector(".igx-display-container"); + const displayContainerRect = headerRowDisplayContainer.getBoundingClientRect(); + let xAxis = displayContainerRect.x + displayContainerRect.width; for (let i = 0; i <= pinnedCols.length - 1; i++) { const elem = row.children[i + 1]; - expect(parseInt((elem as any).style.left, 10)).toBe(-330); + const rect = elem.getBoundingClientRect(); + expect(rect.x).toBe(xAxis); + xAxis += rect.width; expect(elem.getAttribute('aria-describedby')).toBe(grid.id + '_' + pinnedCols[i].field); } @@ -714,9 +719,13 @@ describe('IgxGrid - Column Pinning #grid', () => { const row = grid.gridAPI.get_row_by_index(0).nativeElement; expect(GridFunctions.getRowDisplayContainer(fix, 0)).toBeTruthy(); + const headerRowdisplayContainer = fix.debugElement.query(By.directive(IgxGridHeaderRowComponent)).nativeElement.querySelector(".igx-display-container"); + const displayContainerRect = headerRowdisplayContainer.getBoundingClientRect(); + const xAxis = displayContainerRect.x + displayContainerRect.width; + expect(row.children[1].classList.contains(`${CELL_PINNED_CLASS}-first`)).toBeTruthy(); expect(row.children[1].classList.contains(GRID_MRL_BLOCK)).toBeTruthy(); - expect(parseInt((row.children[1] as any).style.left, 10)).toEqual(-408); + expect(row.children[1].getBoundingClientRect().x).toEqual(xAxis); // check correct headers have left border const firstPinnedHeader = grid.headerGroupsList.find(group => group.isPinned); diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html index fcbb9358d16..7d6aa12cf36 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html @@ -99,8 +99,7 @@ [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column" [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL" - [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL" - [style.left]="column.rightPinnedOffset"> + [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"> } } diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html index 42d4a19c5d3..eaca77bf5f6 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html @@ -119,7 +119,6 @@ [style.min-width]="col.resolvedWidth" [style.max-width]="col.resolvedWidth" [style.flex-basis]="col.resolvedWidth" - [style.left]="col.rightPinnedOffset" [width]="col.getCellWidth()" [visibleColumnIndex]="col.visibleIndex" [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath" 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..038377718e0 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 @@ -305,7 +305,7 @@ [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column" [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL" [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL" - [style.left]="column.rightPinnedOffset" (pointerdown)="grid.navigation.focusOutRowHeader($event)"> + (pointerdown)="grid.navigation.focusOutRowHeader($event)"> } } diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html index 9bcc77428bb..af0d975e076 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html @@ -55,8 +55,7 @@ [style.min-height.px]="minHeight" [style.min-width]="col.resolvedWidth" [style.max-width]="col.resolvedWidth" - [style.flex-basis]="col.resolvedWidth" - [style.left]="col.rightPinnedOffset"> + [style.flex-basis]="col.resolvedWidth"> } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html index 05bbb9e49c4..f9f61475d70 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html @@ -123,7 +123,6 @@ [style.min-width]="col.resolvedWidth" [style.max-width]="col.resolvedWidth" [style.flex-basis]="col.resolvedWidth" - [style.left]="col.rightPinnedOffset" [width]="col.getCellWidth()" [visibleColumnIndex]="col.visibleIndex" [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath" @@ -155,7 +154,6 @@ [style.min-width]="col.resolvedWidth" [style.max-width]="col.resolvedWidth" [style.flex-basis]="col.resolvedWidth" - [style.left]="col.rightPinnedOffset" [width]="col.getCellWidth()" [visibleColumnIndex]="col.visibleIndex" [value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath" From cdb906b34c2b232e094349ab26e0dbd5312a0699 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 25 Aug 2025 17:27:31 +0300 Subject: [PATCH 4/5] lint(*): fix lint --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 685f2dc9a9f..26937901192 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 @@ -719,7 +719,8 @@ width: 100%; overflow: visible; flex: 1; - min-width: 0; // needed to override the min-width of the column headers + // needed to override the min-width of the column headers + min-width: 0; } %grid-mrl-block { From c1c95f526e455fee18493cbb23f382ed1efdafe6 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Tue, 26 Aug 2025 13:25:03 +0300 Subject: [PATCH 5/5] chore(*): fix row drag indicator growing too much --- .../src/lib/core/styles/components/grid/_grid-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 26937901192..283ea92dccb 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 @@ -918,7 +918,7 @@ } padding-block: 0; - flex: 1 0 auto; + flex: 0 0 auto; background: inherit; z-index: 4; cursor: move;