diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts index a7603d545b9..7c6ada02b9d 100644 --- a/projects/igniteui-angular/grids/grid/src/column.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column.spec.ts @@ -51,7 +51,8 @@ describe('IgxGrid - Column properties #grid', () => { TemplatedContextInputColumnsComponent, ColumnHaederClassesComponent, ResizableColumnsComponent, - DOMAttributesAsSettersComponent + DOMAttributesAsSettersComponent, + GridInToggleableWrapperComponent ] }).compileComponents(); })); @@ -325,6 +326,29 @@ describe('IgxGrid - Column properties #grid', () => { expect(grid.columnList.get(1).width).toBe('300px'); }); + it('should not derive a NaN column width when the grid is hidden through its wrapper and all columns are sized', () => { + const fix = TestBed.createComponent(GridInToggleableWrapperComponent); + fix.detectChanges(); + + const grid = fix.componentInstance.grid; + + // Hide the grid through its wrapper (display: none) and force a size recalculation. + // With no width set, the hidden grid falls back to summing its column widths for + // calcWidth, so computedWidth equals sumExistingWidths while columnsToSize is 0. + fix.componentInstance.wrapperHidden = true; + fix.detectChanges(); + grid.reflow(); + fix.detectChanges(); + + const possibleWidth = grid.getPossibleColumnWidth(); + expect(possibleWidth).not.toContain('NaN'); + expect(Number.isFinite(parseFloat(possibleWidth))).toBe(true); + + // the minWidth column must keep a valid, finite pixel width rather than being poisoned by NaN + const minWidthColumn = grid.getColumnByName('field15'); + expect(Number.isFinite(minWidthColumn.calcPixelWidth)).toBe(true); + }); + it('should support passing templates through the markup as an input property', () => { const fixture = TestBed.createComponent(TemplatedInputColumnsComponent); fixture.detectChanges(); @@ -1962,3 +1986,24 @@ describe('IgxGrid column autosizing in zoneless change detection #grid', () => { expect(grid.columns[1].width).toBe('279px'); }); }); +@Component({ + template: ` +
+ + + + +
+ `, + imports: [IgxGridComponent, IgxColumnComponent] +}) +export class GridInToggleableWrapperComponent { + @ViewChild('grid', { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + + public wrapperHidden = false; + public data = [ + { id: 1, field15: 'lorem' }, + { id: 2, field15: 'ipsum' } + ]; +} diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index fa141d090b9..d080cdcf5e9 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -5658,6 +5658,16 @@ export abstract class IgxGridBaseDirective implements GridType, return '0px'; } + // When the grid has no measurable width, calculateGridWidth() falls back to the + // sum of its column widths and sets isColumnWidthSum. If all visible columns + // already have explicit or constrained widths, columnsToSize is 0 and + // computedWidth equals sumExistingWidths, resulting in 0 / 0 = NaN. + // Return the "0px" sentinel so _derivePossibleWidth() preserves the existing + // valid column widths. + if (columnsToSize <= 0 && this.isColumnWidthSum) { + return '0px'; + } + computedWidth -= this.featureColumnsWidth(); const columnWidth = !Number.isFinite(sumExistingWidths) ?