Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into ddincheva/igxToast

Author: ddincheva

.github/workflows/nodejs.yml

@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master, 9.1.x ]
+    branches: [ master, 9.1.x, 10.0.x ]
   pull_request:
-    branches: [ master, 9.1.x ]
+    branches: [ master, 9.1.x, 10.0.x ]
 
 jobs:
   build:

CHANGELOG.md

@@ -9,6 +9,11 @@ All notable changes for each version of this project will be documented in this
 - `IgxSnackbar`
     - `message` property has been deprecated. You can use place the message in the snackbar content or pass it as parameter to the show method instead.
     - An optional string parameter `message` has been added to `show()` method.
+
+### 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
 
 ### General

projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts

@@ -20,6 +20,7 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     public destroyed;
 
     private _afterViewInit = false;
+    private _scrollNativeSize: number;
 
     ngAfterViewInit() {
         this._afterViewInit = true;
@@ -29,7 +30,9 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     onScroll(event) {
         this.scrollAmount = event.target.scrollTop || event.target.scrollLeft;
     }
-    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) { }
+    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
+        this._scrollNativeSize = this.calculateScrollNativeSize();
+     }
 
     get nativeElement() {
         return this.elementRef.nativeElement;
@@ -54,6 +57,10 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     }
 
     public get scrollNativeSize() {
+        return this._scrollNativeSize;
+    }
+
+    public calculateScrollNativeSize() {
         const div = document.createElement('div');
         const style = div.style;
         style.width = '100px';

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');