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 5a9f09f3409..9d2b40109e8 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,9 @@ %grid-display-container-tr { width: 100%; overflow: visible; + flex: 1; + // needed to override the min-width of the column headers + min-width: 0; } %grid-mrl-block { @@ -927,7 +930,7 @@ } padding-block: 0; - flex: 1 0 auto; + flex: 0 0 auto; background: inherit; z-index: 4; cursor: move; 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 db3e0569c2f..de299087ef5 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -1668,13 +1668,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 825d6951afb..5ef9a3af0ea 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 @@ -102,7 +102,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); @@ -854,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'); @@ -887,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); @@ -938,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']); }); 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 c0136d74a61..261a1f203d9 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 @@ -93,8 +93,7 @@ + [column]="column"> } } 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 65bd9cdca22..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', () => { 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 eb204fb12ef..9929fd298f2 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 @@ -106,7 +106,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 577a0f122e9..246d852ae53 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" [style.flex-basis]="column.resolvedWidth" - [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-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; 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 b526f039ca9..abfea16a930 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 @@ -98,7 +98,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" @@ -136,7 +135,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"