feat(resize): Add byHeader argument to the autosize method.

Author: skrustev

CHANGELOG.md

@@ -21,6 +21,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxSelect` support for `igxHint` directive added.
     - Allows the user to add `igxHint` to be displayed bellow the input element.
 
+- `IgxColumn` 
+    - Added `byHeader` parameter to the `autosize` method which specifies if the autosizing should be based only on the header content width.
+
 ## 9.1.1
 
 ### General

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

@@ -1750,10 +1750,11 @@ export class IgxColumnComponent implements AfterContentInit {
      * column.autosize();
      * ```
      * @memberof IgxColumnComponent
+     * @param byHeader Set if column should be autized based only on the header content
      */
-    public autosize() {
+    public autosize(byHeader = false) {
         if (!this.columnGroup) {
-            this.width = this.getLargestCellWidth();
+            this.width = !byHeader ? this.getLargestCellWidth() : Object.values(this.getHeaderCellWidths()).reduce((a, b) => a + b);
             this.grid.reflow();
         }
     }
@@ -1769,6 +1770,31 @@ export class IgxColumnComponent implements AfterContentInit {
         return this._calcWidth;
     }
 
+
+    /**
+     * @hidden
+     * Returns the width and padding of a header cell.
+     */
+    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]);
+        }
+
+        if (this.sortable || this.filterable) {
+            headerWidth += this.headerCell.elementRef.nativeElement.children[1].getBoundingClientRect().width;
+        }
+
+        const headerStyle = this.grid.document.defaultView.getComputedStyle(this.headerCell.elementRef.nativeElement);
+        const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
+            parseFloat(headerStyle.borderRightWidth);
+        return { width: headerWidth, padding: headerPadding};
+    }
+
     /**
      * @hidden
      * Returns the size (in pixels) of the longest currently visible cell, including the header cell.
@@ -1801,23 +1827,8 @@ export class IgxColumnComponent implements AfterContentInit {
         }
 
         if (this.headerCell) {
-            let headerCell;
-            if (this.headerTemplate && this.headerCell.elementRef.nativeElement.children[0].children.length > 0) {
-                headerCell = Math.max(...Array.from(this.headerCell.elementRef.nativeElement.children[0].children)
-                    .map((child) => getNodeSizeViaRange(range, child)));
-            } else {
-                headerCell = getNodeSizeViaRange(range, this.headerCell.elementRef.nativeElement.children[0]);
-            }
-
-            if (this.sortable || this.filterable) {
-                headerCell += this.headerCell.elementRef.nativeElement.children[1].getBoundingClientRect().width;
-            }
-
-            const headerStyle = this.grid.document.defaultView.getComputedStyle(this.headerCell.elementRef.nativeElement);
-            const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
-                parseFloat(headerStyle.borderRightWidth);
-            largest.set(headerCell, headerPadding);
-
+            const headerCellWidths = this.getHeaderCellWidths();
+            largest.set(headerCellWidths.width, headerCellWidths.padding);
         }
 
         const largestCell = Math.max(...Array.from(largest.keys()));

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

@@ -599,6 +599,22 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
         await wait(16);
     });
 
+    it('should autosize column programmatically based only on header.', async() => {
+        const fixture = TestBed.createComponent(LargePinnedColGridComponent);
+        fixture.detectChanges();
+
+        const column = fixture.componentInstance.grid.columnList.filter(c => c.field === 'ReleaseDate')[0];
+        expect(column.width).toEqual('100px');
+
+        column.autosize(true);
+        fixture.detectChanges();
+
+        expect(parseInt(column.width, 10)).toEqual(111);
+
+        // height/width setter rAF
+        await wait(16);
+    });
+
     it('should autosize pinned column programmatically.', async() => {
         const fixture = TestBed.createComponent(LargePinnedColGridComponent);
         fixture.detectChanges();