Merge branch 'master' into iganchev/combo-auto-strategy-poc

Author: IvayloG

CHANGELOG.md

@@ -9,7 +9,8 @@ All notable changes for each version of this project will be documented in this
     - **Behavioral Change** - Change default positioning strategy from `ConnectedPositioningStrategy` to `AutoPositionStrategy`. The Auto strategy will initially try to show the element like the Connected strategy does. If the element goes out of the viewport Auto will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on.
 
 ### New Features
-
+- `IgxColumn` 
+    - Added `byHeader` parameter to the `autosize` method which specifies if the autosizing should be based only on the header content width.
 
 ## 10.0.0
 

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

@@ -1750,10 +1750,12 @@ 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) + 'px');
             this.grid.reflow();
         }
     }
@@ -1769,6 +1771,36 @@ 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);
+
+        // Take into consideration the header group element, since column pinning applies borders to it if its not a columnGroup.
+        const headerGroupStyle = this.grid.document.defaultView.getComputedStyle(this.headerGroup.element.nativeElement);
+        const borderSize = !this.parent ? parseFloat(headerGroupStyle.borderRightWidth) + parseFloat(headerGroupStyle.borderLeftWidth) : 0;
+
+        return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize)};
+    }
+
     /**
      * @hidden
      * Returns the size (in pixels) of the longest currently visible cell, including the header cell.
@@ -1795,29 +1827,14 @@ export class IgxColumnComponent implements AfterContentInit {
             const index = cellsContentWidths.indexOf(Math.max(...cellsContentWidths));
             const cellStyle = this.grid.document.defaultView.getComputedStyle(this.cells[index].nativeElement);
             const cellPadding = parseFloat(cellStyle.paddingLeft) + parseFloat(cellStyle.paddingRight) +
-                parseFloat(cellStyle.borderRightWidth);
+                parseFloat(cellStyle.borderLeftWidth) + parseFloat(cellStyle.borderRightWidth);
 
             largest.set(Math.max(...cellsContentWidths), cellPadding);
         }
 
         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

@@ -383,6 +383,16 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             expect(column.width).toEqual('63px');
         }));
 
+        it('should autosize column programmatically based only on header.', fakeAsync(() => {
+            const column = fixture.componentInstance.grid.columnList.filter(c => c.field === 'ReleaseDate')[0];
+            expect(column.width).toEqual('100px');
+
+            column.autosize(true);
+            fixture.detectChanges();
+
+            expect(column.width).toEqual('112px');
+        }));
+
         it('should autosize pinned column programmatically.', fakeAsync(/** height/width setter rAF */() => {
             const column = grid.getColumnByName('Released');
             expect(column.width).toEqual('100px');