feat(igxPivot): Add API to auto-size the row dimension header cells based on their content.

Author: MKirova

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,75 @@ 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++;
+        }
+    }
+
+    @ViewChildren(IgxPivotRowDimensionContentComponent)
+    protected rowDimensionContentCollection: QueryList<IgxPivotRowDimensionContentComponent>;
+
+    protected getElementContentWidth(element: HTMLElement): any {
+        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);
+
+        return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding) };
+    }
+
+    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 range = this.document.createRange();
+        const largest = new Map<number, number>();
+
+        if (contents.length > 0) {
+            const cellsContentWidths = [];
+            contents.forEach((elem) => cellsContentWidths.push(this.getElementContentWidth(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 +1114,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-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]);
+    }
 }