fix(grid): Apply constraints in a single place when col calculates si…

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;
             }

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;

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);
+        }
     }
 
     /**

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);
+            });
         });