fix(IgxGrid): Do not apply width constraint to groups. (#17071)

Author: MayaKirova

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

@@ -2223,7 +2223,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
                 result.push(size.width + 'px');
             } else {
                 const currentWidth = parseFloat(this.grid.getPossibleColumnWidth());
-                result.push((this.getConstrainedSizePx(currentWidth)) + 'px');
+                const target = size && size.ref ? size.ref : this;
+                result.push((target as IgxColumnComponent).getConstrainedSizePx(currentWidth) + 'px');
             }
         }
         return result;
@@ -2716,7 +2717,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         } else if (this.minWidth && newSize <= this.userSetMinWidthPx) {
             this.widthConstrained = true;
             return this.userSetMinWidthPx;
-        } else if (!this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
+        } else if (!this.columnGroup && !this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
             return this.grid.minColumnWidth;
         } else {
             this.widthConstrained = false;

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

@@ -4,7 +4,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
     CollapsibleColumnGroupTestComponent,
     CollapsibleGroupsTemplatesTestComponent,
-    CollapsibleGroupsDynamicColComponent
+    CollapsibleGroupsDynamicColComponent,
+    CollapsibleGroupWithExplicitChildWidthsComponent
 } 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,
+                CollapsibleGroupWithExplicitChildWidthsComponent
             ]
         }).compileComponents();
     }));
@@ -617,6 +619,28 @@ describe('IgxGrid - multi-column headers #grid', () => {
             expect(spans.length).toBe(2);
         });
 
+        it('should not constrain collapsed column group width by default min width when children have explicit widths (#17042)', () => {
+            const fix = TestBed.createComponent(CollapsibleGroupWithExplicitChildWidthsComponent);
+            fix.detectChanges();
+            const g: IgxGridComponent = fix.componentInstance.grid;
+
+            const customerInfoGroup = GridFunctions.getColGroup(g, 'Customer Information');
+            expect(customerInfoGroup.expanded).toBe(false);
+            expect(customerInfoGroup.collapsible).toBe(true);
+
+            // The only visible child when collapsed is CompanyName with width 100px.
+            const visibleChildren = customerInfoGroup.children
+                .filter(c => !c.hidden);
+            expect(visibleChildren.length).toBe(1);
+
+            const visibleChildWidth = visibleChildren
+                .reduce((sum, c) => sum + c.calcPixelWidth, 0);
+
+            const groupWidth = customerInfoGroup.calcPixelWidth;
+            expect(groupWidth).toBe(visibleChildWidth);
+            expect(groupWidth).toBe(100);
+        });
+
         it('Group By: test when group by a column', () => {
             addressInf.expanded = false;
             countryCol.visibleWhenCollapsed = false;

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

@@ -2812,3 +2812,26 @@ export class IgxGridRowEditingDefinedColumnsComponent extends BasicGridComponent
 })
 export class IgxGridConditionalFilteringComponent extends IgxGridFilteringComponent {
 }
+
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" height="500px" width="600px">
+        <igx-column-group header="Customer Information" [collapsible]="true" [expanded]="false">
+            <igx-column field="CompanyName" width="100px" [visibleWhenCollapsed]="true"></igx-column>
+            <igx-column field="ContactName" width="100px" [visibleWhenCollapsed]="false"></igx-column>
+            <igx-column field="ContactTitle" width="100px" [visibleWhenCollapsed]="false"></igx-column>
+        </igx-column-group>
+        <igx-column field="ID" width="200px"></igx-column>
+        <igx-column field="Address" width="200px"></igx-column>
+        <igx-column field="City" width="200px"></igx-column>
+        <igx-column field="Country" width="200px"></igx-column>
+        <igx-column field="Phone" width="200px"></igx-column>
+    </igx-grid>
+    `,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
+})
+export class CollapsibleGroupWithExplicitChildWidthsComponent {
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+    public data = SampleTestData.contactInfoDataFull();
+}