diff --git a/projects/igniteui-angular/grids/core/src/columns/column.component.ts b/projects/igniteui-angular/grids/core/src/columns/column.component.ts
index d22c329d338..81761595326 100644
--- a/projects/igniteui-angular/grids/core/src/columns/column.component.ts
+++ b/projects/igniteui-angular/grids/core/src/columns/column.component.ts
@@ -2189,7 +2189,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;
@@ -2682,7 +2683,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;
diff --git a/projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts
index f4fc2273286..1b4b414c5e8 100644
--- a/projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts
+++ b/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,
+ 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;
diff --git a/projects/igniteui-angular/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/test-utils/grid-samples.spec.ts
index 05685a5cd69..a4c076a98b7 100644
--- a/projects/igniteui-angular/test-utils/grid-samples.spec.ts
+++ b/projects/igniteui-angular/test-utils/grid-samples.spec.ts
@@ -2794,3 +2794,26 @@ export class IgxGridRowEditingDefinedColumnsComponent extends BasicGridComponent
})
export class IgxGridConditionalFilteringComponent extends IgxGridFilteringComponent {
}
+
+@Component({
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
+})
+export class CollapsibleGroupWithExplicitChildWidthsComponent {
+ @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
+ public grid: IgxGridComponent;
+ public data = SampleTestData.contactInfoDataFull();
+}
diff --git a/src/app/grid-column-groups/grid-column-groups.sample.html b/src/app/grid-column-groups/grid-column-groups.sample.html
index e79e92edbc8..c2c7e4c9a6c 100644
--- a/src/app/grid-column-groups/grid-column-groups.sample.html
+++ b/src/app/grid-column-groups/grid-column-groups.sample.html
@@ -32,9 +32,8 @@
-
+
-
+
+