diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 641c2fb5a0c..f8bac963f55 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -1012,6 +1012,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy return; } this._defaultMinWidth = value; + this.minWidthSetByUser = true; this.grid.notifyChanges(true); } public get minWidth(): string { @@ -1864,6 +1865,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy * @hidden */ protected _maxWidth; + /** + * @hidden + */ + protected _minWidthSetByUser = false; /** * @hidden */ @@ -2149,7 +2154,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy if (size && !!size.width) { result.push(size.width + 'px'); } else { - const currentWidth = parseFloat(this.grid.getPossibleColumnWidth()); + const possibleWidth = this.getPossibeWidth(); + const currentWidth = parseFloat(possibleWidth); result.push((this.getConstrainedSizePx(currentWidth)) + 'px'); } } @@ -2644,7 +2650,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy this._calcWidth = this.grid.calcWidth ? this.getConstrainedSizePx(currentCalcWidth) : 0; } else if (!colWidth || isAutoWidth && !this.autoSize) { // no width - const currentCalcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth(); + const possibleWidth = this.getPossibeWidth(); + const currentCalcWidth = this.defaultWidth || possibleWidth; this._calcWidth = this.getConstrainedSizePx(currentCalcWidth); } else { const currentCalcWidth = parseFloat(this.width); @@ -2699,4 +2706,26 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy this._applySelectableClass = value; } } + + /** + * @hidden + */ + public set minWidthSetByUser(value: boolean) { + this._minWidthSetByUser = value; + } + + /** + * @hidden + */ + public get minWidthSetByUser(): boolean { + return this._minWidthSetByUser; + } + + private getPossibeWidth(): string { + const possibleWidth = this.grid.getPossibleColumnWidth(); + if (!this.minWidthSetByUser && parseFloat(possibleWidth) < this.grid.minColumnWidth) { + return this.grid.minColumnWidth + 'px'; + } + return possibleWidth; + } } diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index c18341a7159..2097f5eea3d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3237,6 +3237,7 @@ export abstract class IgxGridBaseDirective implements GridType, private _shouldRecalcRowHeight = false; private _hostWidth; + private _possibleColumnWidth: string; private _advancedFilteringOverlayId: string; private _advancedFilteringPositionSettings: PositionSettings = { verticalDirection: VerticalAlignment.Middle, @@ -5534,8 +5535,8 @@ export abstract class IgxGridBaseDirective implements GridType, computedWidth -= this.featureColumnsWidth(); const columnWidth = !Number.isFinite(sumExistingWidths) ? - Math.max(computedWidth / columnsToSize, this.minColumnWidth) : - Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth); + Math.max(computedWidth / columnsToSize, this.defaultHeaderGroupMinWidth) : + Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.defaultHeaderGroupMinWidth); return columnWidth + 'px'; } @@ -6619,9 +6620,10 @@ export abstract class IgxGridBaseDirective implements GridType, */ protected _derivePossibleWidth() { if (!this.columnWidthSetByUser) { - this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px'; + this._possibleColumnWidth = this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px'; } this._columns.forEach((column: IgxColumnComponent) => { + this.setPossibleMinColumnWidth(column); if (this.hasColumnLayouts && parseFloat(this._columnWidth)) { const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1); column.defaultWidth = columnWidthCombined + 'px'; @@ -8008,4 +8010,16 @@ export abstract class IgxGridBaseDirective implements GridType, } this._rowCount += 1; // include header row } + + private setPossibleMinColumnWidth(column: IgxColumnComponent): void { + if (this.columnWidthSetByUser || this.width == null) { + return; + } + + if (column.minWidthSetByUser || column.hidden) { + this._columnWidth = this._possibleColumnWidth; + } else if (!column.minWidthSetByUser && parseFloat(this._possibleColumnWidth) < this.minColumnWidth) { + this._columnWidth = this.minColumnWidth + 'px'; + } + } } diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 98a1950e2a4..395683a3335 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -29,6 +29,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { GridFeaturesComponent, LargePinnedColGridComponent, NullColumnsComponent, + MinWidthColumnsComponent, ColGridComponent, ColPercentageGridComponent ] @@ -902,6 +903,18 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { expect(headers[headers.length - 1].nativeElement.innerText).toEqual("ReleaseDate"); expect(firstRowCells.length).toEqual(11); })); + + it('should use user-provided `minWidth` as default min column width to size columns - #16057.', fakeAsync(() => { + const fixture = TestBed.createComponent(MinWidthColumnsComponent); + fixture.detectChanges(); + + const grid = fixture.componentInstance.grid; + + expect(grid.columnList.get(0).width).toEqual('130px'); + expect(grid.columnList.get(1).width).toEqual('90px'); + expect(grid.columnList.get(2).width).toEqual('90px'); + expect(grid.columnList.get(3).width).toEqual('90px'); + })); }); }); @@ -989,6 +1002,23 @@ export class NullColumnsComponent implements OnInit { } } +@Component({ + template: GridTemplateStrings.declareGrid(`width="400px" height="200px"`, ``, ` + + + `), + imports: [IgxGridComponent, IgxColumnComponent] +}) +export class MinWidthColumnsComponent implements OnInit { + @ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent; + + public data = []; + + public ngOnInit(): void { + this.data = SampleTestData.contactInfoData(); + } +} + @Component({ template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``, ` diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts index 1b75dfebb64..39135aedc70 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts @@ -273,7 +273,13 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect mirror.inputs.forEach((input) => { const propName = input.propName; if (!(col[propName] instanceof IgxSummaryOperand)) { - ref.instance[propName] = col[propName]; + if (propName === 'minWidth') { + const minWidthSetByUser = col.minWidthSetByUser; + ref.instance[propName] = col[propName]; + ref.instance.minWidthSetByUser = minWidthSetByUser; + } else { + ref.instance[propName] = col[propName]; + } } else { ref.instance[propName] = col[propName].constructor; }