fix(grid): correct calcPixelWidth for collapsed column groups to prevent header/cell misalignment on scroll

CHANGELOG.md

@@ -100,6 +100,9 @@ All notable changes for each version of this project will be documented in this
 
 ### General
 
+- `IgxGrid`
+    - Fixed an issue where headers and cells were misaligned when collapsible column groups had explicit widths set and horizontal scrolling was used.
+
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`, `IgxPivotGrid`
     - Improved performance by dynamically adjusting the scroll throttle based on the data displayed in grid.
 

projects/igniteui-angular/grids/core/src/columns/column-group.component.ts

@@ -429,4 +429,14 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
         const li = visibleChildren[visibleChildren.length - 1].visibleIndex;
         return li - fi + 1;
     }
+
+    /**
+     * @hidden @internal
+     */
+    protected override setExpandCollapseState() {
+        super.setExpandCollapseState();
+        if (this.grid) {
+            this.cacheCalcWidth();
+        }
+    }
 }

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,
+    CollapsibleGroupInitiallyCollapsedComponent
 } 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,
+                CollapsibleGroupInitiallyCollapsedComponent
             ]
         }).compileComponents();
     }));
@@ -245,6 +247,32 @@ describe('IgxGrid - multi-column headers #grid', () => {
             expect(countryCol.visibleWhenCollapsedChange.emit).toHaveBeenCalledWith(undefined);
         });
 
+        it('calcPixelWidth of initially collapsed group should reflect only visible children widths - bug #17042', () => {
+            // Create a separate fixture for this test: a collapsible group initially collapsed
+            // with explicit child column widths
+            const localFixture = TestBed.createComponent(CollapsibleGroupInitiallyCollapsedComponent);
+            localFixture.detectChanges();
+            const localGrid = localFixture.componentInstance.grid;
+
+            const personalInfoGroup = GridFunctions.getColGroup(localGrid, 'Personal Info');
+
+            // After initial collapse (expanded=false in template):
+            // 'ContactName' (visibleWhenCollapsed=true) should be visible
+            // 'ContactTitle' (visibleWhenCollapsed=false) should be hidden
+            const contactNameCol = localGrid.getColumnByName('ContactName');
+            const contactTitleCol = localGrid.getColumnByName('ContactTitle');
+
+            expect(contactNameCol.hidden).toBeFalse();
+            expect(contactTitleCol.hidden).toBeTrue();
+
+            // The group's calcPixelWidth must equal only the visible child's width (200px),
+            // NOT the full expanded width (400px = 200 + 200).
+            // The dynamic `width` getter correctly excludes hidden children, so
+            // calcPixelWidth must match it.
+            const dynamicGroupWidth = parseFloat(personalInfoGroup.width);
+            expect(personalInfoGroup.calcPixelWidth).toEqual(dynamicGroupWidth);
+        });
+
         it('verify ARIA Support', () => {
             const contactInfHeader = GridFunctions.getColumnGroupHeaderCell(contactInf.header, fixture);
             const addressInfHeader = GridFunctions.getColumnGroupHeaderCell(addressInf.header, fixture);

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

@@ -2009,6 +2009,28 @@ export class CollapsibleGroupsDynamicColComponent {
     }
 }
 
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" height="500px" width="800px">
+        <igx-column field="ID" width="150px"></igx-column>
+        <igx-column-group header="Personal Info" [collapsible]="true" [expanded]="false">
+            <igx-column field="ContactName" width="200px" [visibleWhenCollapsed]="true"></igx-column>
+            <igx-column field="ContactTitle" width="200px" [visibleWhenCollapsed]="false"></igx-column>
+        </igx-column-group>
+        <igx-column field="CompanyName" width="150px"></igx-column>
+        <igx-column field="Address" width="150px"></igx-column>
+        <igx-column field="City" width="150px"></igx-column>
+        <igx-column field="Country" width="150px"></igx-column>
+    </igx-grid>
+    `,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
+})
+export class CollapsibleGroupInitiallyCollapsedComponent {
+    @ViewChild('grid', { static: true })
+    public grid: IgxGridComponent;
+    public data = SampleTestData.contactInfoDataFull();
+}
+
 @Component({
     template: `
     <igx-grid #grid [data]="data" height="500px" width="1300px" columnWidth="100px">