fix(resizing): Unify autosize logic between API and user interaction. Remove handling for circular dependency sizing and introduce autosizeHeader. #9158

Author: skrustev

CHANGELOG.md

@@ -37,6 +37,8 @@ All notable changes for each version of this project will be documented in this
                 [summaryFormatter]="dateSummaryFormat">
             </igx-column>
         ```
+    - **Behavioral Change** - `Column Autosize` feature now does not handle templated headers where the first level children are sized based on parent like default `div` and etc. Autosizing for such headers will not result in change.
+    - A new `IgxColumnComponent` input property is exposed called `autosizeHeader`, which if false, allows the autosizing to ignore the header template and autosize only based on content cells.
 ### Themes:
 - Breaking Changes:
     - `IgxButton` theme has been simplified. The number of theme params (`igx-button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). See the migration guide to update existing button themes. Updates performed with `ng update` will migrate existing button themes but some additional tweaking may be required to account for the abscense of prefixed params.

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

@@ -246,6 +246,24 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     @WatchColumnChanges()
     @Input()
     public resizable = false;
+
+    /**
+     * Sets/gets whether the column header is included in autosize logic.
+     * Useful when template for a column header is sized based on parent, for example a default `div`.
+     * Default value is `false`.
+     * ```typescript
+     * let isResizable = this.column.resizable;
+     * ```
+     * ```html
+     * <igx-column [resizable] = "true"></igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @WatchColumnChanges()
+    @Input()
+    public autosizeHeader = true;
+    
     /**
      * Gets a value indicating whether the summary for the column is enabled.
      * ```typescript
@@ -2088,12 +2106,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      * ```
      *
      * @memberof IgxColumnComponent
-     * @param byHeader Set if column should be autized based only on the header content
+     * @param byHeaderOnly Set if column should be autosized based only on the header content.
      */
-    public autosize(byHeader = false) {
+    public autosize(byHeaderOnly = false) {
         if (!this.columnGroup) {
-            const size = this.getAutoSize(byHeader);
-            this.width = size;
+            this.width = this.getAutoSize(byHeaderOnly);
             this.grid.reflow();
         }
     }
@@ -2104,15 +2121,25 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     public getAutoSize(byHeader = false) {
         const size = !byHeader ? this.getLargestCellWidth() :
             (Object.values(this.getHeaderCellWidths()).reduce((a, b) => a + b) + 'px');
-        const gridAvailableSize = this.grid.calcWidth;
-        let newWidth;
         const isPercentageWidth = this.width && typeof this.width === 'string' && this.width.indexOf('%') !== -1;
+            
+        let newWidth;
         if (isPercentageWidth) {
+            const gridAvailableSize = this.grid.calcWidth;
             const percentageSize =  parseFloat(size) / gridAvailableSize * 100;
             newWidth = percentageSize + '%';
         } else {
             newWidth = size;
         }
+
+        const maxWidth = isPercentageWidth ? this.maxWidthPercent : this.maxWidthPx;
+        const minWidth = isPercentageWidth ? this.minWidthPercent : this.minWidthPx;
+        if (this.maxWidth && (parseFloat(newWidth) > maxWidth)) {
+            newWidth = isPercentageWidth ? maxWidth + '%' : maxWidth + 'px';
+        } else if (parseFloat(newWidth) < minWidth) {
+            newWidth = isPercentageWidth ? minWidth + '%' : minWidth + 'px';
+        }
+
         return newWidth;
     }
 
@@ -2134,13 +2161,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      */
     public getHeaderCellWidths() {
         const range = this.grid.document.createRange();
-        let headerWidth;
-        if (this.headerTemplate && this.headerCell.elementRef.nativeElement.children[0].children.length > 0) {
-            headerWidth = Math.max(...Array.from(this.headerCell.elementRef.nativeElement.children[0].children)
-                .map((child) => getNodeSizeViaRange(range, child)));
-        } else {
-            headerWidth = getNodeSizeViaRange(range, this.headerCell.elementRef.nativeElement.children[0]);
-        }
+
+        // We do not cover cases where there are children with width 100% and etc, because then we try to get new column size, based on header content, which is sized based on column size...
+        let headerWidth = getNodeSizeViaRange(range, this.headerCell.elementRef.nativeElement.children[0]);
 
         if (this.sortable || this.filterable) {
             headerWidth += this.headerCell.elementRef.nativeElement.children[1].getBoundingClientRect().width;
@@ -2188,7 +2211,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
             largest.set(Math.max(...cellsContentWidths), cellPadding);
         }
 
-        if (this.headerCell) {
+        if (this.headerCell && this.autosizeHeader) {
             const headerCellWidths = this.getHeaderCellWidths();
             largest.set(headerCellWidths.width, headerCellWidths.padding);
         }

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

@@ -678,6 +678,20 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
 
             expect(column.width).toEqual('89px');
         });
+
+        it('should ignore header template during autosize if autosizeHeader is false.', () => {
+            const column = grid.getColumnByName('ID');
+            column.minWidth = "10px";
+            column.autosizeHeader = false;
+            fixture.detectChanges();
+
+            expect(column.width).toEqual('150px');
+
+            column.autosize();
+            fixture.detectChanges();
+
+            expect(column.width).toEqual('55px');
+        });
     });
 
     describe('Multi Column Headers tests: ', () => {

projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts

@@ -80,16 +80,7 @@ export class IgxColumnResizingService {
      */
     public autosizeColumnOnDblClick() {
         const currentColWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
-        const isPercentageWidth = this.column.width && typeof this.column.width === 'string' && this.column.width.indexOf('%') !== -1;
-        let size = this.column.getAutoSize();
-        const maxWidth = isPercentageWidth ? this.column.maxWidthPercent : this.column.maxWidthPx;
-        const minWidth = isPercentageWidth ? this.column.minWidthPercent : this.column.minWidthPx;
-        if (this.column.maxWidth && (parseFloat(size) > maxWidth)) {
-            size = isPercentageWidth ? maxWidth + '%' : maxWidth + 'px';
-        } else if (parseFloat(size) < minWidth) {
-            size = isPercentageWidth ? minWidth + '%' : minWidth + 'px';
-        }
-        this.column.width = size;
+        this.column.width = this.column.getAutoSize();
 
         this.zone.run(() => {});
 

projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts

@@ -163,11 +163,7 @@ export class ColumnDefinitions {
         <igx-column [field]="'ReleaseDate'" [resizable]="true" dataType="date"></igx-column>
         <igx-column [field]="'Category'" [width]="'150px'" [resizable]="true" dataType="string">
             <ng-template igxCell igxHeader>
-                <div>
-                    <div style="width: 40px; min-width: 40px; min-height: 40px; background-color: gray;">
-                        JS
-                    </div> 
-                </div>
+                <igx-avatar initials="JS"></igx-avatar>
             </ng-template>
         </igx-column>
         <igx-column [field]="'Items'" [width]="'60px'" [hasSummary]="true" [resizable]="true" dataType="string"></igx-column>