From 8ec5d336fe4062bc88ff935b2beb1c7994c37990 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Tue, 8 Jul 2025 15:01:26 +0300 Subject: [PATCH 1/7] 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 69f87fbed2b..153afd981d6 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 @@ -667,6 +667,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', () => { @@ -1689,7 +1701,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 92968ac93e087ca658f0a13c8c84fc0407eb6e76 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Tue, 8 Jul 2025 16:23:40 +0300 Subject: [PATCH 2/7] 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 cc5ce39d8af..d1a4e36ed92 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 @@ -718,6 +718,7 @@ %grid-display-container-tr { width: 100%; overflow: visible; + flex: 1; } %grid-mrl-block { From c68b7d0e856e005b4e11ae0693e666b65691b8eb Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 25 Aug 2025 17:21:06 +0300 Subject: [PATCH 3/7] 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 | 1 - .../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(+), 23 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 d1a4e36ed92..685f2dc9a9f 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,6 +719,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 30c7ab57c89..e3324cc3a3d 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -1619,13 +1619,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy return this.pinningPosition === ColumnPinningPosition.End && pinnedCols[0] === this; } - /** @hidden @internal **/ - public get rightPinnedOffset(): string { - return this.pinned && this.pinningPosition === ColumnPinningPosition.End ? - - this.grid.pinnedEndWidth - this.grid.pinnedStartWidth + '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 f0eecaecd20..ed28bdfba17 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 @@
{ @@ -134,7 +134,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; @@ -694,9 +694,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; } // check correct headers have left border @@ -715,9 +720,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); @@ -810,7 +819,7 @@ describe('IgxGrid - Column Pinning #grid', () => { .toEqual(grid.pinnedStartColumns.length + grid.unpinnedColumns.length + 1); expect(col.pinningPosition).toBe(ColumnPinningPosition.End); - let cell = grid.gridAPI.get_cell_by_index(0, 'ID'); + const cell = grid.gridAPI.get_cell_by_index(0, 'ID'); expect(cell.visibleColumnIndex) .toEqual(grid.pinnedStartColumns.length + grid.unpinnedColumns.length + 1); expect(GridFunctions.isCellPinned(cell)).toBe(true); 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 3163dd403cf..db081d07bc9 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 131773bd307..03e1ee23d83 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 5d507b28fba..48e0f2c7746 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 6588859cf17..c2710596cae 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 f1143950558..06b7dbc89fd 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 a2cb09beb131fa7a0e2b8175c2702aafd4109a4c Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 25 Aug 2025 17:27:31 +0300 Subject: [PATCH 4/7] 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 0514f7c47bbfbfad1a0ab7fcef1015331b4a8d7a Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Tue, 26 Aug 2025 13:25:03 +0300 Subject: [PATCH 5/7] 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; From 4cc0766c93a10b042b2c726ba853aebac8340eb2 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Tue, 26 Aug 2025 15:24:56 +0300 Subject: [PATCH 6/7] chore(*): update left/right column pinning tests --- .../src/lib/grids/grid/grid.pinning.spec.ts | 36 +++++++++++-------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts index a5612dc4992..97d5a317695 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts @@ -863,10 +863,10 @@ describe('IgxGrid - Column Pinning #grid', () => { expect(grid.unpinnedColumns[1].field).toEqual('ID'); expect(grid.getColumnByName('ID').pinned).toBeFalsy(); - // move 'ID' column to the left pinned area, before ContractName - grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('ContactName'), DropPosition.BeforeDropTarget); - tick(); - fix.detectChanges(); + // move 'ID' column to the left pinned area, before ContractName + grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('ContactName'), DropPosition.BeforeDropTarget); + tick(); + fix.detectChanges(); // verify column is pinned at the correct place expect(grid.pinnedStartColumns[0].field).toEqual('ID'); @@ -896,7 +896,7 @@ describe('IgxGrid - Column Pinning #grid', () => { expect(cellFax.active).toBe(false); expect(cellCompanyName.active).toBe(true); - // navigate from left pinned area into unpinned and back + // navigate from left pinned area into unpinned and back grid.navigation.activeNode = { row: 0, column: 0 }; fix.detectChanges(); expect(grid.getCellByColumn(0, "ContactName").active).toBe(true); @@ -947,25 +947,33 @@ describe('IgxGrid - Column Pinning #grid', () => { expect(grid.getColumnByName('Country').isFirstPinned).toBeTruthy(); expect(grid.getColumnByName('ContactTitle').isLastPinned).toBeTruthy(); const row = grid.gridAPI.get_row_by_index(0).nativeElement; - // check pinnedEnd cells are rendered after main display container and have left offset - for (let i = pinnedStart.length ; i <= pinnedStart.length + pinnedEnd.length - 1; i++) { + fix.detectChanges(); + // check pinnedEnd cells are rendered after main display container + const displayContainerBoundingBox = row.querySelector('igx-display-container').getBoundingClientRect(); + let initialStart = displayContainerBoundingBox.x + displayContainerBoundingBox.width; + for (let i = pinnedStart.length; i <= pinnedStart.length + pinnedEnd.length - 1; i++) { const elem = row.children[i + 1]; - expect(parseFloat((elem as any).style.left)).toBe(- (grid.pinnedEndWidth + grid.pinnedStartWidth)); + const rect = elem.getBoundingClientRect(); + expect(rect.x).toBe(initialStart); + initialStart += rect.width } - // check pinnedStart cells are rendered before main display container and have no left offset - for (let i = 0; i <= pinnedStart.length - 1; i++) { + // check pinnedStart cells are rendered before main display container + initialStart = displayContainerBoundingBox.x; + for (let i = pinnedStart.length - 1; i >= 0; i--) { const elem = row.children[i]; - expect((elem as any).style.left).toBe(''); + const rect = elem.getBoundingClientRect(); + expect(rect.x + rect.width).toBe(initialStart); + initialStart -= rect.width; } // check correct headers are pinned and in correct order. const pinnedHeaders = grid.headerGroupsList.filter(group => group.isPinned); expect(pinnedHeaders.length).toBe(10); expect(pinnedHeaders.map(x => x.column.header || x.column.field)) - .toEqual(['General Information', 'CompanyName', 'Person Details', - 'ContactName', 'ContactTitle', 'Address Information', - 'Country', 'Region', 'City', 'Address']); + .toEqual(['General Information', 'CompanyName', 'Person Details', + 'ContactName', 'ContactTitle', 'Address Information', + 'Country', 'Region', 'City', 'Address']); }); From 2bc0b6017dbd0a97f89e1e4b4462df131e1d3efc Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Tue, 26 Aug 2025 15:25:10 +0300 Subject: [PATCH 7/7] test(*): update tree grid right pinning test --- .../src/lib/grids/tree-grid/tree-grid-integration.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts index d02235cd5e2..648f70ae17e 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts @@ -1431,8 +1431,8 @@ describe('IgxTreeGrid - Integration #tGrid', () => { fix = TestBed.createComponent(IgxTreeGridRowEditingHierarchicalDSTransactionComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid as IgxTreeGridComponent; - treeGrid.columnList.find(x => x.field === 'Age').pinned = true; treeGrid.pinning.columns = 1; + treeGrid.columnList.find(x => x.field === 'Age').pinned = true; fix.detectChanges(); const rightMostGridPart = treeGrid.nativeElement.getBoundingClientRect().right;