diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts index fd73bc8c071..22c3b66d89a 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(); @@ -1943,6 +1967,29 @@ export class DOMAttributesAsSettersComponent { public data = [{ id: 1, value: 1 }]; } +@Component({ + template: ` +
+ + + + +
+ `, + changeDetection: ChangeDetectionStrategy.Eager, + 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' } + ]; +} + describe('IgxGrid column autosizing in zoneless change detection #grid', () => { beforeEach(() => { TestBed.configureTestingModule({ 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 04af42f9e8d..556bd30d8ba 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -5636,6 +5636,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) ?