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 12768f29090..75fb876584a 100644 --- a/projects/igniteui-angular/grids/core/src/columns/column.component.ts +++ b/projects/igniteui-angular/grids/core/src/columns/column.component.ts @@ -2672,13 +2672,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy * @hidden * @internal */ - public getConstrainedSizePx(newSize){ - if (this.maxWidth && newSize > this.maxWidthPx) { + public getConstrainedSizePx(newSize) { + if (this.maxWidth && newSize >= this.maxWidthPx) { this.widthConstrained = true; return this.maxWidthPx; - } else if (this.minWidth && newSize < this.userSetMinWidthPx) { + } 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)) { + return this.grid.minColumnWidth; } else { this.widthConstrained = false; return newSize; @@ -2701,11 +2703,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy } else if (!colWidth || isAutoWidth && !this.autoSize) { // no width const currentCalcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth(); - this._calcWidth = this.getConstrainedSizePx(currentCalcWidth); + this._calcWidth = this.getConstrainedSizePx(parseFloat(currentCalcWidth)); } else { let possibleColumnWidth = ''; if (!this.widthSetByUser && this.userSetMinWidthPx && this.userSetMinWidthPx < this.grid.minColumnWidth) { - possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth(null, this.userSetMinWidthPx); + possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth(); } else { possibleColumnWidth = this.width; } diff --git a/projects/igniteui-angular/grids/core/src/common/grid.interface.ts b/projects/igniteui-angular/grids/core/src/common/grid.interface.ts index b407679e009..1a15ae77984 100644 --- a/projects/igniteui-angular/grids/core/src/common/grid.interface.ts +++ b/projects/igniteui-angular/grids/core/src/common/grid.interface.ts @@ -905,7 +905,7 @@ export interface GridType extends IGridDataBindable { refreshSearch(): void; getDefaultExpandState(record: any): boolean; trackColumnChanges(index: number, column: any): any; - getPossibleColumnWidth(baseWidth?: number, minColumnWidth?: number): string; + getPossibleColumnWidth(baseWidth?: number): string; resetHorizontalVirtualization(): void; hasVerticalScroll(): boolean; getVisibleContentHeight(): number; diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index b47e3fb43fa..10a6e22ca7c 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -5573,7 +5573,7 @@ export abstract class IgxGridBaseDirective implements GridType, /** * @hidden @internal */ - public getPossibleColumnWidth(baseWidth: number = null, minColumnWidth: number = null) { + public getPossibleColumnWidth(baseWidth: number = null) { let computedWidth; if (baseWidth !== null) { computedWidth = baseWidth; @@ -5620,13 +5620,12 @@ export abstract class IgxGridBaseDirective implements GridType, if (!sumExistingWidths && !columnsToSize) { return '0px'; } - computedWidth -= this.featureColumnsWidth(); - const minColWidth = minColumnWidth || this.minColumnWidth; + computedWidth -= this.featureColumnsWidth(); const columnWidth = !Number.isFinite(sumExistingWidths) ? - Math.max(computedWidth / columnsToSize, minColWidth) : - Math.max((computedWidth - sumExistingWidths) / columnsToSize, minColWidth); + computedWidth / columnsToSize : + (computedWidth - sumExistingWidths) / columnsToSize; return columnWidth + 'px'; } @@ -6736,49 +6735,28 @@ export abstract class IgxGridBaseDirective implements GridType, */ protected _derivePossibleWidth() { if (!this.columnWidthSetByUser) { - this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px'; + const possibleWidth = this.getPossibleColumnWidth(); + if (possibleWidth === "0px") { + // all columns - hidden + this._columnWidth = possibleWidth; + } else if (this.width !== null) { + this._columnWidth = Math.max(parseFloat(possibleWidth), this.minColumnWidth) + 'px' + } else { + this._columnWidth = this.minColumnWidth + 'px'; + } } this._columns.forEach((column: IgxColumnComponent) => { if (this.hasColumnLayouts && parseFloat(this._columnWidth)) { const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1); column.defaultWidth = columnWidthCombined + 'px'; } else { - // D.K. March 29th, 2021 #9145 Consider min/max width when setting defaultWidth property - column.defaultWidth = this.getExtremumBasedColWidth(column); + column.defaultWidth = this._columnWidth; column.resetCaches(); } }); this.resetCachedWidths(); } - /** - * @hidden - * @internal - */ - protected getExtremumBasedColWidth(column: IgxColumnComponent): string { - let width = this._columnWidth; - if (width && typeof width !== 'string') { - width = String(width); - } - const minWidth = width.indexOf('%') === -1 ? column.userSetMinWidthPx : column.minWidthPercent; - const maxWidth = width.indexOf('%') === -1 ? column.maxWidthPx : column.maxWidthPercent; - if (column.hidden) { - return width; - } - - if (minWidth > parseFloat(width)) { - width = String(column.minWidth); - } else if (maxWidth < parseFloat(width)) { - width = String(column.maxWidth); - } - - // if no px or % are defined in maxWidth/minWidth consider it px - if (width.indexOf('%') === -1 && width.indexOf('px') === -1) { - width += 'px'; - } - return width; - } - protected resetNotifyChanges() { this._cdrRequestRepaint = false; this._cdrRequests = false; @@ -7072,13 +7050,6 @@ export abstract class IgxGridBaseDirective implements GridType, this.cdr.detectChanges(); } - // in case horizontal scrollbar has appeared recalc to size correctly. - if (hasHScroll !== this.hasHorizontalScroll()) { - this.isHorizontalScrollHidden = !this.hasHorizontalScroll(); - this.cdr.detectChanges(); - this.calculateGridHeight(); - this.cdr.detectChanges(); - } if (this.zone.isStable) { this.zone.run(() => { this._applyWidthHostBinding(); @@ -7098,6 +7069,16 @@ export abstract class IgxGridBaseDirective implements GridType, this._autoSizeColumnsNotify.next(); }); } + + // in case horizontal scrollbar has appeared recalc to size correctly. + if (hasHScroll !== this.hasHorizontalScroll()) { + this.isHorizontalScrollHidden = !this.hasHorizontalScroll(); + this.cdr.detectChanges(); + this.calculateGridHeight(); + this.cdr.detectChanges(); + } else { + this.resetCaches(recalcFeatureWidth); + } } /** diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts index a5782e6034e..3a09da1118b 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts @@ -2170,6 +2170,38 @@ describe('IgxGrid Component Tests #grid', () => { // first column takes new min expect(col1.calcPixelWidth).toBe(500); }); + + it('in columns with no width and min-widths should recalculate and re-apply constraints to all cols.', () => { + const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent); + // 3 cols + fix.componentInstance.initColumnsRows(5, 3); + fix.detectChanges(); + + const grid = fix.componentInstance.grid; + grid.columns[0].minWidth = "80px"; + grid.columns[1].minWidth = "90px"; + grid.columns[2].minWidth = "130px"; + + grid.width = "300px"; + fix.detectChanges(); + + expect(grid.columns[0].calcWidth).toBe(80); + expect(grid.columns[1].calcWidth).toBe(90); + expect(grid.columns[2].calcWidth).toBe(130); + + expect(grid.hasHorizontalScroll()).toBe(false); + expect(grid.isHorizontalScrollHidden).toBe(true); + + grid.width = "290px"; + fix.detectChanges(); + + expect(grid.columns[0].calcWidth).toBe(80); + expect(grid.columns[1].calcWidth).toBe(90); + expect(grid.columns[2].calcWidth).toBe(130); + + expect(grid.hasHorizontalScroll()).toBe(true); + expect(grid.isHorizontalScrollHidden).toBe(false); + }); });