From b6b222dfb3920217f430786f566fd95a4f9fe2a3 Mon Sep 17 00:00:00 2001
From: Viktor Kombov <vkombov@infragistics.com>
Date: Fri, 24 Jul 2026 16:34:25 +0300
Subject: [PATCH] fix(grid): prevent NaN column width when hidden grid has all
 columns sized

---
 .../grids/grid/src/column.spec.ts             | 51 ++++++++++++++++++-
 .../grids/grid/src/grid-base.directive.ts     | 10 ++++
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts
index 5d875b8fb09..35d7287c38c 100644
--- a/projects/igniteui-angular/grids/grid/src/column.spec.ts
+++ b/projects/igniteui-angular/grids/grid/src/column.spec.ts
@@ -1,4 +1,4 @@
-import { Component, DebugElement, TemplateRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { Component, DebugElement, TemplateRef, ViewChild, ChangeDetectionStrategy, provideZonelessChangeDetection } from '@angular/core';
 import { TestBed, fakeAsync, tick, waitForAsync, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { getLocaleCurrencySymbol, registerLocaleData } from '@angular/common';
@@ -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();
@@ -1942,3 +1966,26 @@ export class DOMAttributesAsSettersComponent {
 
     public data = [{ id: 1, value: 1 }];
 }
+
+@Component({
+    template: `
+        <div [style.display]="wrapperHidden ? 'none' : 'block'" style="width: 500px; height: 400px;">
+            <igx-grid #grid [data]="data" height="400px">
+                <igx-column field="id" dataType="number" width="1000px"></igx-column>
+                <igx-column field="field15" dataType="string" minWidth="150px"></igx-column>
+            </igx-grid>
+        </div>
+    `,
+    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' }
+    ];
+}
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 ee11fce0646..ea618c156f9 100644
--- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts
+++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts
@@ -5637,6 +5637,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) ?