fix(grid): prevent header/cell misalignment with collapsible column groups (#17042)

Co-authored-by: ivanvpetrov <110455887+ivanvpetrov@users.noreply.github.com>
Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/2868c645-079b-41e4-8b5f-299bfac230a2

Author: Copilot

CHANGELOG.md

@@ -9,6 +9,11 @@ All notable changes for each version of this project will be documented in this
 - `IgxCombo`, `IgxSimpleCombo`
     - Introduced the `selectionChanged` event for both components. The event is not cancelable and is emitted after the selection is committed and the component state is updated.
 
+### General
+
+- `IgxGrid`
+    - Fixed an issue where headers and cells became misaligned when collapsible column groups were present and columns inside the collapsed group had explicit width values, causing standalone columns to misalign with their headers when scrolled horizontally (#17042).
+
 ## 21.1.3
 
 ### Security Fixes

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts

@@ -5654,7 +5654,7 @@ export abstract class IgxGridBaseDirective implements GridType,
 
         const columnsWithSetWidths = this.hasColumnLayouts ?
             visibleCols.filter(c => c.widthSetByUser) :
-            visibleChildColumns.filter(c => (c.widthSetByUser || c.widthConstrained) && c.width !== 'fit-content');
+            visibleChildColumns.filter(c => (c.widthSetByUser || (c.widthConstrained && !isNaN(c.calcPixelWidth))) && c.width !== 'fit-content');
 
         const columnsToSize = this.hasColumnLayouts ?
             combinedBlocksSize - columnsWithSetWidths.length :

projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts

@@ -4,7 +4,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
     CollapsibleColumnGroupTestComponent,
     CollapsibleGroupsTemplatesTestComponent,
-    CollapsibleGroupsDynamicColComponent
+    CollapsibleGroupsDynamicColComponent,
+    CollapsibleGroupWithExplicitWidthsTestComponent
 } from '../../../test-utils/grid-samples.spec';
 import { GridFunctions } from '../../../test-utils/grid-functions.spec';
 import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec';
@@ -28,7 +29,8 @@ describe('IgxGrid - multi-column headers #grid', () => {
                 NoopAnimationsModule,
                 CollapsibleColumnGroupTestComponent,
                 CollapsibleGroupsTemplatesTestComponent,
-                CollapsibleGroupsDynamicColComponent
+                CollapsibleGroupsDynamicColComponent,
+                CollapsibleGroupWithExplicitWidthsTestComponent
             ]
         }).compileComponents();
     }));
@@ -636,4 +638,40 @@ describe('IgxGrid - multi-column headers #grid', () => {
             GridFunctions.verifyColumnIsHidden(countryCol, true, 12);
         });
     });
+
+    describe('Column width after collapse', () => {
+        let fixture;
+        let grid: IgxGridComponent;
+
+        beforeEach(fakeAsync(() => {
+            fixture = TestBed.createComponent(CollapsibleGroupWithExplicitWidthsTestComponent);
+            fixture.detectChanges();
+            tick(16);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+        }));
+
+        it('standalone auto-sized columns with minWidth should not use stale widthConstrained after group collapse', fakeAsync(() => {
+            // In expanded state, standalone columns (minWidth=150px) fill (700 - 400) / 2 = 150px each,
+            // which equals minWidth, causing widthConstrained=true.
+            const standaloneContactName = grid.getColumnByName('ContactName');
+            const standaloneContactTitle = grid.getColumnByName('ContactTitle');
+
+            // Confirm group is initially expanded and standalone columns are constrained at minWidth
+            const groupA = GridFunctions.getColGroup(grid, 'Group A');
+            expect(groupA.expanded).toBe(true);
+            expect(standaloneContactName.calcPixelWidth).toBeLessThanOrEqual(150);
+
+            // Collapse the group — grouped columns (ID, CompanyName) become hidden
+            groupA.expanded = false;
+            tick(16);
+            fixture.detectChanges();
+
+            // After collapse only the 2 standalone auto-sized columns remain visible.
+            // Expected width per standalone ≈ 700 / 2 = 350px (no explicit-width columns remain visible).
+            // Bug: stale widthConstrained=true causes columnsToSize=0 → columnWidth=Infinity → wrong calcPixelWidth.
+            expect(standaloneContactName.calcPixelWidth).toBeGreaterThan(200);
+            expect(standaloneContactTitle.calcPixelWidth).toBeGreaterThan(200);
+        }));
+    });
 });

projects/igniteui-angular/test-utils/grid-samples.spec.ts

@@ -2009,6 +2009,25 @@ export class CollapsibleGroupsDynamicColComponent {
     }
 }
 
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" height="500px" width="700px">
+        <igx-column-group header="Group A" [collapsible]="true">
+            <igx-column field="ID" width="200px" [visibleWhenCollapsed]="false"></igx-column>
+            <igx-column field="CompanyName" width="200px" [visibleWhenCollapsed]="false"></igx-column>
+        </igx-column-group>
+        <igx-column field="ContactName" minWidth="150px"></igx-column>
+        <igx-column field="ContactTitle" minWidth="150px"></igx-column>
+    </igx-grid>
+    `,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
+})
+export class CollapsibleGroupWithExplicitWidthsTestComponent {
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+    public data = SampleTestData.contactInfoDataFull();
+}
+
 @Component({
     template: `
     <igx-grid #grid [data]="data" height="500px" width="1300px" columnWidth="100px">