Merge pull request #10814 from IgniteUI/mkirova/autoSize-RowDimension

feat(igxPivot): Add API to auto-size the row dimension header cells b…

Author: dkamburov

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

@@ -2312,23 +2312,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * Returns the width and padding of a header cell.
      */
     public getHeaderCellWidths() {
-        const range = this.grid.document.createRange();
-
-        // 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...
-        const headerWidth = this.platform.getNodeSizeViaRange(range,
-            this.headerCell.nativeElement,
-            this.headerGroup.nativeElement);
-
-        const headerStyle = this.grid.document.defaultView.getComputedStyle(this.headerCell.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.nativeElement);
-        const borderSize = !this.parent ? parseFloat(headerGroupStyle.borderRightWidth) + parseFloat(headerGroupStyle.borderLeftWidth) : 0;
-
-        return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize) };
+        return this.grid.getHeaderCellWidth(this.headerCell.nativeElement);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -404,6 +404,7 @@ export interface GridType extends IGridDataBindable {
     hasColumnGroups: boolean;
     hasEditableColumns: boolean;
     uniqueColumnValuesStrategy: (column: ColumnType, tree: FilteringExpressionsTree, done: (values: any[]) => void) => void;
+    getHeaderCellWidth: (element: HTMLElement) => ISizeInfo;
 
     cdr: ChangeDetectorRef;
     document: Document;
@@ -643,3 +644,8 @@ export interface GridSVGIcon {
     name: string;
     value: string;
 }
+
+export interface ISizeInfo {
+    width: number,
+    padding: number
+}

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

@@ -123,7 +123,7 @@ import {
     IPinColumnCancellableEventArgs
 } from './common/events';
 import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
-import { ColumnType, GridServiceType, GridType, IGX_GRID_SERVICE_BASE, RowType } from './common/grid.interface';
+import { ColumnType, GridServiceType, GridType, IGX_GRID_SERVICE_BASE, ISizeInfo, RowType } from './common/grid.interface';
 import { DropPosition } from './moving/moving.service';
 import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './selection/row-selectors';
 import { IgxColumnComponent } from './columns/column.component';
@@ -3883,6 +3883,26 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.width === null || diff >= 0;
     }
 
+    /**
+     * @hidden @internal
+     * Gets the header cell inner width for auto-sizing.
+     */
+    public getHeaderCellWidth(element: HTMLElement): ISizeInfo {
+        const range = this.document.createRange();
+        const headerWidth = this.platform.getNodeSizeViaRange(range,
+            element,
+            element.parentElement);
+
+        const headerStyle = this.document.defaultView.getComputedStyle(element);
+        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.document.defaultView.getComputedStyle(element.parentElement);
+        const borderSize = parseFloat(headerGroupStyle.borderRightWidth) + parseFloat(headerGroupStyle.borderLeftWidth);
+        return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize) };
+    }
+
     /**
      * @hidden @internal
      * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.

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

@@ -23,7 +23,8 @@ import {
     ViewContainerRef,
     Injector,
     NgModuleRef,
-    ApplicationRef
+    ApplicationRef,
+    ContentChildren
 } from '@angular/core';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
@@ -62,6 +63,8 @@ import { IgxGridTransaction } from '../common/types';
 import { SortingDirection } from '../../data-operations/sorting-strategy';
 import { GridBaseAPIService } from '../api.service';
 import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
+import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component';
+import { flatten } from '@angular/compiler';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -993,6 +996,58 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         super.setupColumns();
     }
 
+    /**
+     * Auto-sizes row dimension cells.
+     *
+     * @remarks
+     * Only sizes based on the dimension cells in view.
+     * @example
+     * ```typescript
+     * this.grid.autoSizeRowDimension(dimension);
+     * ```
+     * @param dimension The row dimension to size.
+     */
+    public autoSizeRowDimension(dimension: IPivotDimension) {
+        if (this.getDimensionType(dimension) === PivotDimensionType.Row) {
+            const relatedDims = PivotUtil.flatten([dimension]).map(x => x.memberName);
+            const content = this.rowDimensionContentCollection.filter(x => relatedDims.indexOf(x.dimension.memberName) !== -1);
+            const headers = flatten(content.map(x => x.headerGroups.toArray())).map(x => x.header.refInstance);
+            const autoWidth = this.getLargesContentWidth(headers);
+            dimension.width = autoWidth;
+            this.pipeTrigger++;
+            this.cdr.detectChanges();
+        }
+    }
+
+    @ViewChildren(IgxPivotRowDimensionContentComponent)
+    protected rowDimensionContentCollection: QueryList<IgxPivotRowDimensionContentComponent>;
+
+    protected getDimensionType(dimension: IPivotDimension): PivotDimensionType {
+        return PivotUtil.flatten(this.rowDimensions).indexOf(dimension) !== -1 ? PivotDimensionType.Row :
+            PivotUtil.flatten(this.columnDimensions).indexOf(dimension) !== -1 ? PivotDimensionType.Column : PivotDimensionType.Filter;
+    }
+
+    protected getLargesContentWidth(contents: ElementRef[]): string {
+        const largest = new Map<number, number>();
+        if (contents.length > 0) {
+            const cellsContentWidths = [];
+            contents.forEach((elem) => cellsContentWidths.push(this.getHeaderCellWidth(elem.nativeElement).width));
+            const index = cellsContentWidths.indexOf(Math.max(...cellsContentWidths));
+            const cellStyle = this.document.defaultView.getComputedStyle(contents[index].nativeElement);
+            const cellPadding = parseFloat(cellStyle.paddingLeft) + parseFloat(cellStyle.paddingRight) +
+                parseFloat(cellStyle.borderLeftWidth) + parseFloat(cellStyle.borderRightWidth);
+            largest.set(Math.max(...cellsContentWidths), cellPadding);
+        }
+        const largestCell = Math.max(...Array.from(largest.keys()));
+        const width = Math.ceil(largestCell + largest.get(largestCell));
+
+        if (Number.isNaN(width)) {
+            return null;
+        } else {
+            return width + 'px';
+        }
+    }
+
     protected resolveToggle(groupColumn: IgxColumnComponent, state: boolean) {
         groupColumn.hidden = state;
         this.columnGroupStates.set(groupColumn.field, state);
@@ -1042,12 +1097,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /**
  * @hidden @internal
  */
-    @ViewChildren('verticalRowDimScrollContainer', { read: IgxGridForOfDirective})
+    @ViewChildren('verticalRowDimScrollContainer', { read: IgxGridForOfDirective })
     public verticalRowDimScrollContainers: QueryList<IgxGridForOfDirective<any>>;
 
     protected verticalScrollHandler(event) {
         super.verticalScrollHandler(event);
-        this.verticalRowDimScrollContainers.forEach(x => { 
+        this.verticalRowDimScrollContainers.forEach(x => {
             x.onScroll(event);
             x.cdr.detectChanges();
         });

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

@@ -812,6 +812,17 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
             expect((rowChip1.nativeElement.previousElementSibling as any).style.visibility).toBe('hidden');
             expect((rowChip1.nativeElement.nextElementSibling as any).style.visibility).toBe('hidden');
         });
+
+        it('should auto-size row dimension via the API.', () => {
+            const pivotGrid = fixture.componentInstance.pivotGrid;
+            const rowDimension = pivotGrid.pivotConfiguration.rows[0];
+            expect(rowDimension.width).toBeUndefined();
+            expect(pivotGrid.resolveRowDimensionWidth(rowDimension)).toBe(200);
+            pivotGrid.autoSizeRowDimension(rowDimension);
+            fixture.detectChanges();
+            expect(rowDimension.width).toBe('186px');
+            expect(pivotGrid.resolveRowDimensionWidth(rowDimension)).toBe(186);
+        });
     });
 });
 

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.ts

@@ -3,12 +3,15 @@ import {
     ChangeDetectorRef,
     Component,
     ComponentFactoryResolver,
+    ContentChildren,
     ElementRef,
     Inject,
     Input,
+    QueryList,
     SimpleChanges,
     TemplateRef,
     ViewChild,
+    ViewChildren,
     ViewContainerRef
 } from '@angular/core';
 import { IgxColumnGroupComponent } from '../columns/column-group.component';
@@ -18,6 +21,7 @@ import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface';
 import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
 import { IgxRowDirective } from '../row.directive';
 import { IPivotDimension, IPivotDimensionData } from './pivot-grid.interface';
+import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-header-group.component';
 import { PivotUtil } from './pivot-util';
 
 /**
@@ -59,6 +63,9 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
     @ViewChild('headerDefaultTemplate', { read: TemplateRef, static: true })
     public headerTemplateDefault: TemplateRef<any>;
 
+    @ViewChildren(IgxPivotRowDimensionHeaderGroupComponent)
+    public headerGroups: QueryList<IgxPivotRowDimensionHeaderGroupComponent>
+
     constructor(
         @Inject(IGX_GRID_BASE) public grid: PivotGridType,
         protected ref: ElementRef<HTMLElement>,

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Inject, Input } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Inject, Input, ViewChild, ViewChildren } from '@angular/core';
 import { PlatformUtil } from '../../core/utils';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface';
@@ -7,6 +7,7 @@ import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.compon
 import { IgxColumnResizingService } from '../resizing/resizing.service';
 import { IgxRowDirective } from '../row.directive';
 import { IPivotDimension } from './pivot-grid.interface';
+import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component';
 
 /**
  * @hidden
@@ -41,6 +42,9 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
     @Input()
     public parent: any;
 
+    @ViewChild(IgxPivotRowDimensionHeaderComponent)
+    public header: IgxPivotRowDimensionHeaderComponent;
+
     @HostBinding('attr.id')
     public get headerID() {
         return `${this.grid.id}_-2_${this.rowIndex}_${this.visibleIndex}`;

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header.component.ts

@@ -19,7 +19,7 @@ export class IgxPivotRowDimensionHeaderComponent extends IgxGridHeaderComponent
         @Inject(IGX_GRID_BASE) public grid: GridType,
         public colResizingService: IgxColumnResizingService,
         public cdr: ChangeDetectorRef,
-        private refInstance: ElementRef<HTMLElement>
+        public refInstance: ElementRef<HTMLElement>
     ) {
         super(grid, colResizingService, cdr, refInstance);
     }

src/app/pivot-grid/pivot-grid.sample.html

@@ -10,6 +10,8 @@
             <button igxButton [disabled]="grid1.displayDensity === compact" (click)="setDensity('compact')">Compact</button>
         </igx-buttongroup>
     </div>
+    <button (click)='autoSizeRow(0)'>AutoSize Row 0</button>
+    <button (click)='autoSizeRow(1)'>AutoSize Row 1</button>
 </div>
 
 <igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true'

src/app/pivot-grid/pivot-grid.sample.ts

@@ -222,4 +222,8 @@ export class PivotGridSampleComponent {
     public setDensity(density: DisplayDensity) {
         this.grid1.displayDensity = density;
     }
+
+    public autoSizeRow(ind) {
+        this.grid1.autoSizeRowDimension(this.pivotConfigHierarchy.rows[ind]);
+    }
 }