Merge pull request #6400 from IgniteUI/ddincheva/columnwidthivy

Reduce the recalculation of featureColumnWidth

Author: rkaraivanov

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

@@ -1778,7 +1778,7 @@ export class IgxColumnComponent implements AfterContentInit {
         const colWidth = this.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
         if (isPercentageWidth) {
-            this._calcWidth = parseInt(colWidth, 10) / 100 * (grid.calcWidth - grid.featureColumnsWidth);
+            this._calcWidth = parseInt(colWidth, 10) / 100 * (grid.calcWidth - grid.featureColumnsWidth());
         } else if (!colWidth) {
             // no width
             this._calcWidth = this.defaultWidth || grid.getPossibleColumnWidth();

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

@@ -2834,6 +2834,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     private _unpinnedWidth = NaN;
     private _visibleColumns = [];
     private _columnGroups = false;
+    protected _headerFeaturesWidth = NaN;
 
     private _columnWidth: string;
 
@@ -3071,10 +3072,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         });
 
         this.verticalScrollContainer.onContentSizeChange.pipe(destructor, filter(() => !this._init)).subscribe(($event) => {
-            this.calculateGridSizes();
+            this.calculateGridSizes(false);
         });
 
         this.onDensityChanged.pipe(destructor).subscribe(() => {
+            this._headerFeaturesWidth = NaN;
             this.summaryService.summaryHeight = 0;
             this.endEdit(true);
             this.cdr.markForCheck();
@@ -3153,7 +3155,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      * @internal
      */
-    public resetCaches() {
+    public resetCaches(recalcFeatureWidth = true) {
+        if (recalcFeatureWidth) {
+            this._headerFeaturesWidth = NaN;
+        }
         this.resetForOfCache();
         this.resetColumnsCaches();
         this.resetColumnCollections();
@@ -3418,17 +3423,26 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden
      * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
-     * TODO: Update for Angular 8. Calling parent class getter using super is not supported for now.
      */
-    public get featureColumnsWidth() {
-        return this.getFeatureColumnsWidth();
+    public featureColumnsWidth(expander?: ElementRef) {
+        if (Number.isNaN(this._headerFeaturesWidth)) {
+            const rowSelectArea = this.headerSelectorContainer ?
+                this.headerSelectorContainer.nativeElement.getBoundingClientRect().width : 0;
+            const rowDragArea = this.rowDraggable && this.headerDragContainer ?
+                this.headerDragContainer.nativeElement.getBoundingClientRect().width : 0;
+            const groupableArea = this.headerGroupContainer ?
+                this.headerGroupContainer.nativeElement.getBoundingClientRect().width : 0;
+            const expanderWidth = expander ? expander.nativeElement.getBoundingClientRect().width : 0;
+            this._headerFeaturesWidth = rowSelectArea + rowDragArea + groupableArea + expanderWidth;
+        }
+        return this._headerFeaturesWidth;
     }
 
     /**
      * @hidden
      */
     get summariesMargin() {
-        return this.featureColumnsWidth;
+        return this.featureColumnsWidth();
     }
 
     /**
@@ -4609,11 +4623,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
         }
 
-        computedWidth -= this.getFeatureColumnsWidth();
-
-        if (this.showDragIcons) {
-            computedWidth -= this.headerDragContainer ? this.headerDragContainer.nativeElement.offsetWidth : 0;
-        }
+        computedWidth -= this.featureColumnsWidth();
 
         const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup);
 
@@ -4703,7 +4713,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             return null;
         }
         this.cdr.detectChanges();
-        colSum += this.getFeatureColumnsWidth();
+        colSum += this.featureColumnsWidth();
         return colSum;
     }
 
@@ -4778,7 +4788,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    protected calculateGridSizes() {
+    protected calculateGridSizes(recalcFeatureWidth = true) {
         /*
             TODO: (R.K.) This layered lasagne should be refactored
             ASAP. The reason I have to reset the caches so many times is because
@@ -4787,11 +4797,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             sizing process which of course, uses values from the caches, thus resulting
             in a broken layout.
         */
-        this.resetCaches();
+        this.resetCaches(recalcFeatureWidth);
         this.cdr.detectChanges();
         const hasScroll = this.hasVerticalSroll();
         this.calculateGridWidth();
-        this.resetCaches();
+        this.resetCaches(recalcFeatureWidth);
         this.cdr.detectChanges();
         this.calculateGridHeight();
 
@@ -4821,7 +4831,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 });
             });
         }
-        this.resetCaches();
+        this.resetCaches(recalcFeatureWidth);
     }
 
     private _applyWidthHostBinding() {
@@ -4838,25 +4848,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.cdr.markForCheck();
     }
 
-
-    /**
-     * @hidden
-     * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
-     * Method used to override the calculations.
-     * TODO: Remove for Angular 8. Calling parent class getter using super is not supported for now.
-     */
-    public getFeatureColumnsWidth() {
-        let width = 0;
-
-        if (this.isRowSelectable) {
-            width += this.headerSelectorContainer ? this.headerSelectorContainer.nativeElement.getBoundingClientRect().width : 0;
-        }
-        if (this.rowDraggable) {
-            width += this.headerDragContainer ? this.headerDragContainer.nativeElement.getBoundingClientRect().width : 0;
-        }
-        return width;
-    }
-
     /**
      * Gets calculated width of the pinned area.
      * ```typescript
@@ -4873,7 +4864,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 sum += parseInt(col.calcWidth, 10);
             }
         }
-        sum += this.featureColumnsWidth;
+        sum += this.featureColumnsWidth();
 
         return sum;
     }

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

@@ -650,7 +650,7 @@ describe('IgxGrid - Row Selection #grid', () => {
             grid = fix.componentInstance.grid;
         }));
 
-        it('Change  RowSelection to multiple ', () => {
+        it('Change  RowSelection to multiple ', fakeAsync(() => {
             GridSelectionFunctions.verifyHeaderRowHasCheckbox(fix, false, false);
             GridSelectionFunctions.verifyRowHasCheckbox(grid.getRowByIndex(0).nativeElement, false, false);
 
@@ -661,13 +661,15 @@ describe('IgxGrid - Row Selection #grid', () => {
 
             grid.rowSelection = GridSelectionMode.multiple;
             fix.detectChanges();
+            tick(100);
+            fix.detectChanges();
 
             GridSelectionFunctions.verifyHeaderAndRowCheckBoxesAlignment(grid);
             GridSelectionFunctions.verifyRowSelected(grid.getRowByIndex(0), false, false);
             GridSelectionFunctions.verifyHeaderRowCheckboxState(fix);
             GridSelectionFunctions.verifyHeaderRowHasCheckbox(fix);
             GridSelectionFunctions.verifyRowHasCheckbox(grid.getRowByIndex(0).nativeElement);
-        });
+        }));
     });
 
     describe('RowSelection single', () => {
@@ -1548,7 +1550,7 @@ describe('IgxGrid - Row Selection #grid', () => {
             grid.getColumnByName('ProductID').hasSummary = true;
             fix.detectChanges();
 
-            expect(grid.summariesMargin).toBe(grid.featureColumnsWidth);
+            expect(grid.summariesMargin).toBe(grid.featureColumnsWidth());
         });
 
         it('Filtering: Should properly check the header checkbox state when filtering, #2469', () => {

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

@@ -2362,8 +2362,8 @@ describe('IgxGrid - Summaries #grid', () => {
     function verifySummaryRowIndentationByDataRowIndex(fixture, visibleIndex) {
         const summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fixture, visibleIndex);
         const summaryRowIndentation = summaryRow.query(By.css('.igx-grid__summaries-patch'));
-        const expander = fixture.componentInstance.grid.headerGroupContainer;
-        expect(summaryRowIndentation.nativeElement.offsetWidth).toEqual(expander.nativeElement.offsetWidth);
+        const grid = fixture.componentInstance.grid;
+        expect(summaryRowIndentation.nativeElement.offsetWidth).toEqual(grid.featureColumnsWidth());
     }
 
     function verifyBaseSummaries(fixture) {

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -33,11 +33,10 @@
         <div class="igx-grid__tr" role="row" [style.width.px]='calcWidth'>
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
                 [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
-                class="igx-grid__scroll-on-drag-left" [style.left.px]="featureColumnsWidth"></span>
+                class="igx-grid__scroll-on-drag-left" [style.left.px]="pinnedWidth"></span>
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0"
                 [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
                 class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
-
             <ng-container *ngIf="groupingExpressions.length > 0">
                 <div class="igx-grid__header-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"
                     [ngClass]="{

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

@@ -1139,21 +1139,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         return this.groupArea ? this.groupArea.nativeElement.offsetHeight : 0;
     }
 
-    /**
-     * @hidden
-     * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
-     * TODO: Remove for Angular 8. Calling parent class getter using super is not supported for now.
-     */
-    public getFeatureColumnsWidth() {
-        let width = super.getFeatureColumnsWidth();
-
-        if (this.groupingExpressions.length && this.headerGroupContainer) {
-            width += this.headerGroupContainer.nativeElement.offsetWidth;
-        }
-
-        return width;
-    }
-
     /**
      * @hidden
      */
@@ -1243,6 +1228,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         this.onGroupingDone.pipe(takeUntil(this.destroy$)).subscribe((args) => {
             this.endEdit(true);
             this.summaryService.updateSummaryCache(args);
+            this._headerFeaturesWidth = NaN;
         });
     }
 

projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts

@@ -218,9 +218,12 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
         it('should align horizontal scrollbar with first column when column pinning is disabled', fakeAsync(() => {
             // has no draggable and selectable rows
             grid.width = '400px';
+            tick(30);
+            fixture.detectChanges();
             grid.rowSelection = GridSelectionMode.none;
             grid.rowDraggable = false;
-            tick();
+            fixture.detectChanges();
+            tick(30);
             fixture.detectChanges();
             let rowSelectElement: DebugElement = fixture.debugElement.query(By.css(CSS_CLASS_SELECTION_CHECKBOX));
             let dragIndicatorElement: DebugElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DRAG_INDICATOR));
@@ -231,7 +234,8 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
             // has draggable rows and has no selectable rows
             grid.rowSelection = GridSelectionMode.none;
             grid.rowDraggable = true;
-            tick();
+            fixture.detectChanges();
+            tick(30);
             fixture.detectChanges();
             rowSelectElement = fixture.debugElement.query(By.css(CSS_CLASS_SELECTION_CHECKBOX));
             dragIndicatorElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DRAG_INDICATOR));

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -11,11 +11,11 @@
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0"
                 [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
                 class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
-                <div #headerHierarchyExpander (click)="toggleAll()" [hidden]='!hasExpandableChildren || !hasVisibleColumns' [ngClass]="{
-                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header': hasExpandableChildren,
-                    'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible,
-                    'igx-grid__hierarchical-expander--no-border': isRowSelectable || rowDraggable
-                }">
+            <div #headerHierarchyExpander (click)="toggleAll()" [hidden]='!hasExpandableChildren || !hasVisibleColumns' [ngClass]="{
+                'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header': hasExpandableChildren,
+                'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible,
+                'igx-grid__hierarchical-expander--no-border': isRowSelectable || rowDraggable
+            }">
                 <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }"></ng-container>
             </div>
             <ng-container *ngIf="rowDraggable">

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts

@@ -416,6 +416,11 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         super.ngAfterContentInit();
     }
 
+    /** @hidden */
+    public featureColumnsWidth() {
+        return super.featureColumnsWidth(this.headerHierarchyExpander);
+    }
+
     /**
     * @hidden
     */
@@ -452,7 +457,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
             });
             this.columnList.reset(topCols);
             if (recalcColSizes && this.columnList.length !== colLength) {
-                this.calculateGridSizes();
+                this.calculateGridSizes(false);
             }
         }
     }
@@ -499,32 +504,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         }
     }
 
-    /**
-     * @hidden
-     * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
-     * TODO: Remove for Angular 8. Calling parent class getter using super is not supported for now.
-     */
-    public getFeatureColumnsWidth() {
-        let width = super.getFeatureColumnsWidth();
-
-        if (this.hasExpandableChildren) {
-            width += this.headerHierarchyExpander.nativeElement.offsetWidth || this.getDefaultExpanderWidth();
-        }
-
-        return width;
-    }
-
-     private getDefaultExpanderWidth(): number {
-        switch (this.displayDensity) {
-            case DisplayDensity.cosy:
-                return 57;
-            case DisplayDensity.compact:
-                return 49;
-            default:
-                return 72;
-        }
-    }
-
     /**
      * @hidden
      */

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

@@ -498,11 +498,14 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
 
         it('should render summaries for column inside a column group.', fakeAsync(/** row toggle rAF */() => {
             fixture.componentInstance.rowIsland.childColumns.first.hasSummary = false;
+            tick();
             fixture.detectChanges();
             fixture.componentInstance.rowIsland.childColumns.last.hasSummary = true;
+            tick();
             fixture.detectChanges();
 
             (hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0] as HTMLElement).click();
+            tick();
             fixture.detectChanges();
 
             const childGrids =  fixture.debugElement.queryAll(By.css('igx-child-grid-row'));