Skip to content

Commit 7ad324a

Browse files
MayaKirovaMayaKirova
authored
fix(IgxGrid): Do not apply width constraint to groups. (#17070)
1 parent cd5e668 commit 7ad324a

File tree

4 files changed

+55
-7
lines changed

4 files changed

+55
-7
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2189,7 +2189,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
21892189
result.push(size.width + 'px');
21902190
} else {
21912191
const currentWidth = parseFloat(this.grid.getPossibleColumnWidth());
2192-
result.push((this.getConstrainedSizePx(currentWidth)) + 'px');
2192+
const target = size && size.ref ? size.ref : this;
2193+
result.push((target as IgxColumnComponent).getConstrainedSizePx(currentWidth) + 'px');
21932194
}
21942195
}
21952196
return result;
@@ -2682,7 +2683,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
26822683
} else if (this.minWidth && newSize <= this.userSetMinWidthPx) {
26832684
this.widthConstrained = true;
26842685
return this.userSetMinWidthPx;
2685-
} else if (!this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
2686+
} else if (!this.columnGroup && !this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
26862687
return this.grid.minColumnWidth;
26872688
} else {
26882689
this.widthConstrained = false;

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

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
44
import {
55
CollapsibleColumnGroupTestComponent,
66
CollapsibleGroupsTemplatesTestComponent,
7-
CollapsibleGroupsDynamicColComponent
7+
CollapsibleGroupsDynamicColComponent,
8+
CollapsibleGroupWithExplicitChildWidthsComponent
89
} from '../../../test-utils/grid-samples.spec';
910
import { GridFunctions } from '../../../test-utils/grid-functions.spec';
1011
import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec';
@@ -28,7 +29,8 @@ describe('IgxGrid - multi-column headers #grid', () => {
2829
NoopAnimationsModule,
2930
CollapsibleColumnGroupTestComponent,
3031
CollapsibleGroupsTemplatesTestComponent,
31-
CollapsibleGroupsDynamicColComponent
32+
CollapsibleGroupsDynamicColComponent,
33+
CollapsibleGroupWithExplicitChildWidthsComponent
3234
]
3335
}).compileComponents();
3436
}));
@@ -617,6 +619,28 @@ describe('IgxGrid - multi-column headers #grid', () => {
617619
expect(spans.length).toBe(2);
618620
});
619621

622+
it('should not constrain collapsed column group width by default min width when children have explicit widths (#17042)', () => {
623+
const fix = TestBed.createComponent(CollapsibleGroupWithExplicitChildWidthsComponent);
624+
fix.detectChanges();
625+
const g: IgxGridComponent = fix.componentInstance.grid;
626+
627+
const customerInfoGroup = GridFunctions.getColGroup(g, 'Customer Information');
628+
expect(customerInfoGroup.expanded).toBe(false);
629+
expect(customerInfoGroup.collapsible).toBe(true);
630+
631+
// The only visible child when collapsed is CompanyName with width 100px.
632+
const visibleChildren = customerInfoGroup.children
633+
.filter(c => !c.hidden);
634+
expect(visibleChildren.length).toBe(1);
635+
636+
const visibleChildWidth = visibleChildren
637+
.reduce((sum, c) => sum + c.calcPixelWidth, 0);
638+
639+
const groupWidth = customerInfoGroup.calcPixelWidth;
640+
expect(groupWidth).toBe(visibleChildWidth);
641+
expect(groupWidth).toBe(100);
642+
});
643+
620644
it('Group By: test when group by a column', () => {
621645
addressInf.expanded = false;
622646
countryCol.visibleWhenCollapsed = false;

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2794,3 +2794,26 @@ export class IgxGridRowEditingDefinedColumnsComponent extends BasicGridComponent
27942794
})
27952795
export class IgxGridConditionalFilteringComponent extends IgxGridFilteringComponent {
27962796
}
2797+
2798+
@Component({
2799+
template: `
2800+
<igx-grid #grid [data]="data" height="500px" width="600px">
2801+
<igx-column-group header="Customer Information" [collapsible]="true" [expanded]="false">
2802+
<igx-column field="CompanyName" width="100px" [visibleWhenCollapsed]="true"></igx-column>
2803+
<igx-column field="ContactName" width="100px" [visibleWhenCollapsed]="false"></igx-column>
2804+
<igx-column field="ContactTitle" width="100px" [visibleWhenCollapsed]="false"></igx-column>
2805+
</igx-column-group>
2806+
<igx-column field="ID" width="200px"></igx-column>
2807+
<igx-column field="Address" width="200px"></igx-column>
2808+
<igx-column field="City" width="200px"></igx-column>
2809+
<igx-column field="Country" width="200px"></igx-column>
2810+
<igx-column field="Phone" width="200px"></igx-column>
2811+
</igx-grid>
2812+
`,
2813+
imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
2814+
})
2815+
export class CollapsibleGroupWithExplicitChildWidthsComponent {
2816+
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
2817+
public grid: IgxGridComponent;
2818+
public data = SampleTestData.contactInfoDataFull();
2819+
}

‎src/app/grid-column-groups/grid-column-groups.sample.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,8 @@
3232
<igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Region" [visibleWhenCollapsed]="false"></igx-column>
3333
<igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="City" [visibleWhenCollapsed]="false"></igx-column>
3434
<igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Address" [visibleWhenCollapsed]="false"></igx-column>
35-
<igx-column [filterable]="true" [editable]="true" [sortable]="true" [visibleWhenCollapsed]="true" field="FullAddress"></igx-column>
35+
<igx-column [filterable]="true" [editable]="true" [sortable]="true" [visibleWhenCollapsed]="true" width="100px" field="FullAddress"></igx-column>
3636
</igx-column-group>
37-
<!-- <igx-column field="Missing"></igx-column>
3837
<igx-column field="Missing"></igx-column>
3938
<igx-column field="Missing"></igx-column>
4039
<igx-column field="Missing"></igx-column>
@@ -45,7 +44,8 @@
4544
<igx-column field="Missing"></igx-column>
4645
<igx-column field="Missing"></igx-column>
4746
<igx-column field="Missing"></igx-column>
48-
<igx-column field="Missing"></igx-column> -->
47+
<igx-column field="Missing"></igx-column>
48+
<igx-column field="Missing"></igx-column>
4949
<igx-column-group header="Address Information">
5050
<igx-column-group header="Location">
5151
<igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Country"></igx-column>

0 commit comments

Comments
 (0)