feat(igxGrid): Apply min/max width constraints on user-set and auto-w… (#15449)

Author: MayaKirova

CHANGELOG.md

@@ -3,11 +3,14 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 19.2.0
+
 ### General
 - `IgxCarousel`
     - Removed deprecated property `keyboardSupport`.
 - `IgxSlide`
     - **Deprecation** - `tabIndex` has been deprecated and will be removed in a future version.
+- `IgxGrid`, `IgxHierarchicalGrid`, `IgxTreeGrid`
+    - A column's `minWidth` and `maxWidth` constrain the user-specified `width` so that it cannot go outside their bounds.
 
 ## 19.1.1
 ### New Features

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

@@ -524,8 +524,14 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      */
     @WatchColumnChanges()
     @Input()
-    public maxWidth: string;
+    public set maxWidth(value: string) {
+        this._maxWidth = value;
 
+        this.grid.notifyChanges(true);
+    }
+    public get maxWidth(): string {
+        return this._maxWidth;
+    }
     /**
      * Sets/gets the class selector of the column header.
      * ```typescript
@@ -938,6 +944,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return isPercentageWidth ? parseFloat(this.minWidth) / 100 * gridAvailableSize : parseFloat(this.minWidth);
     }
 
+    /**
+     * @hidden
+     */
+    public get userSetMinWidthPx() {
+        const gridAvailableSize = this.grid.calcWidth;
+        const isPercentageWidth = this._defaultMinWidth && typeof this._defaultMinWidth === 'string' && this._defaultMinWidth.indexOf('%') !== -1;
+        return isPercentageWidth ? parseFloat(this._defaultMinWidth) / 100 * gridAvailableSize : parseFloat(this._defaultMinWidth);
+    }
+
     /**
      * @hidden
      */
@@ -969,7 +984,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
             return;
         }
         this._defaultMinWidth = value;
-
+        this.grid.notifyChanges(true);
     }
     public get minWidth(): string {
         return !this._defaultMinWidth ? this.defaultMinWidth : this._defaultMinWidth;
@@ -1737,6 +1752,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      */
     public destroy$ = new Subject<any>();
 
+    /**
+     * @hidden
+     */
+    public widthConstrained = false;
+
     /**
      * @hidden
      */
@@ -1811,6 +1831,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * @hidden
      */
     protected _defaultMinWidth = '';
+    /**
+     * @hidden
+     */
+    protected _maxWidth;
     /**
      * @hidden
      */
@@ -2096,7 +2120,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
             if (size && !!size.width) {
                 result.push(size.width + 'px');
             } else {
-                result.push(parseFloat(this.grid.getPossibleColumnWidth()) + 'px');
+                const currentWidth = parseFloat(this.grid.getPossibleColumnWidth());
+                result.push((this.getConstrainedSizePx(currentWidth)) + 'px');
             }
         }
         return result;
@@ -2558,6 +2583,23 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return res.join(' ');
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public getConstrainedSizePx(newSize){
+        if (this.maxWidth && newSize > this.maxWidthPx) {
+            this.widthConstrained = true;
+            return this.maxWidthPx;
+        } else if (this.minWidth && newSize < this.userSetMinWidthPx) {
+            this.widthConstrained = true;
+            return this.userSetMinWidthPx;
+        } else {
+            this.widthConstrained = false;
+            return newSize;
+        }
+    }
+
     /**
      * @hidden
      * @internal
@@ -2567,14 +2609,17 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
         const isAutoWidth = colWidth && typeof colWidth === 'string' && colWidth === 'fit-content';
         if (isPercentageWidth && this.grid.isColumnWidthSum) {
-            this._calcWidth = this.grid.minColumnWidth;
+            this._calcWidth = this.userSetMinWidthPx ? this.userSetMinWidthPx : this.grid.minColumnWidth;
         } else if (isPercentageWidth) {
-            this._calcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth;
+            const currentCalcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth;
+            this._calcWidth = this.grid.calcWidth ? this.getConstrainedSizePx(currentCalcWidth) : 0;
         } else if (!colWidth || isAutoWidth && !this.autoSize) {
             // no width
-            this._calcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
+            const currentCalcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
+            this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
         } else {
-            this._calcWidth = this.width;
+            const currentCalcWidth =  parseFloat(this.width);
+            this._calcWidth =this.getConstrainedSizePx(currentCalcWidth);
         }
         this.calcPixelWidth = parseFloat(this._calcWidth);
     }

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -5424,22 +5424,25 @@ export abstract class IgxGridBaseDirective implements GridType,
 
         const columnsWithSetWidths = this.hasColumnLayouts ?
             visibleCols.filter(c => c.widthSetByUser) :
-            visibleChildColumns.filter(c => c.widthSetByUser && c.width !== 'fit-content');
+            visibleChildColumns.filter(c => (c.widthSetByUser || c.widthConstrained) && c.width !== 'fit-content');
 
         const columnsToSize = this.hasColumnLayouts ?
             combinedBlocksSize - columnsWithSetWidths.length :
             visibleChildColumns.length - columnsWithSetWidths.length;
         const sumExistingWidths = columnsWithSetWidths
             .reduce((prev, curr) => {
-                const colWidth = curr.width;
+                const colInstance =  this.hasColumnLayouts ? curr.ref : curr;
+                const colWidth = !colInstance.widthConstrained ? curr.width : colInstance.calcPixelWidth;
                 let widthValue = parseFloat(colWidth);
                 if (isNaN(widthValue)) {
                     widthValue = MINIMUM_COLUMN_WIDTH;
                 }
                 const currWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1 ?
                     widthValue / 100 * computedWidth :
                     widthValue;
-                return prev + currWidth;
+                // apply constraints, since constraint may change width
+                const constrainedWidth = this.hasColumnLayouts ? currWidth : colInstance.getConstrainedSizePx(currWidth);
+                return prev + constrainedWidth;
             }, 0);
 
         // When all columns are hidden, return 0px width
@@ -6555,7 +6558,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         if (width && typeof width !== 'string') {
             width = String(width);
         }
-        const minWidth = width.indexOf('%') === -1 ? column.minWidthPx : column.minWidthPercent;
+        const minWidth = width.indexOf('%') === -1 ? column.userSetMinWidthPx : column.minWidthPercent;
         const maxWidth = width.indexOf('%') === -1 ? column.maxWidthPx : column.maxWidthPercent;
         if (column.hidden) {
             return width;
@@ -7343,8 +7346,8 @@ export abstract class IgxGridBaseDirective implements GridType,
                 let maxSize = Math.ceil(Math.max(...cellsContentWidths)) + 1;
                 if (col.maxWidth && maxSize > col.maxWidthPx) {
                     maxSize = col.maxWidthPx;
-                } else if (maxSize < col.minWidthPx) {
-                    maxSize = col.minWidthPx;
+                } else if (maxSize < col.userSetMinWidthPx) {
+                    maxSize = col.userSetMinWidthPx;
                 }
                 col.autoSize = maxSize;
                 col.resetCaches();

projects/igniteui-angular/src/lib/grids/grid/column.spec.ts

@@ -1564,7 +1564,8 @@ describe('IgxGrid - Column properties #grid', () => {
             tick();
 
             let widths = grid.columns.map(x => x.width);
-            expect(widths).toEqual(['80px', '130px', '121px', '114px', '92px', '80px', '86px', '108px', '82px', '80px']);
+            // default min of 80px is disregarded for user-set widths, including auto.
+            expect(widths).toEqual(['68px', '130px', '121px', '114px', '92px', '72px', '86px', '108px', '82px', '69px']);
             fix.componentInstance.data = SampleTestData.contactInfoData();
             fix.detectChanges();
             tick();