Merge from base.

Author: MKirova

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

@@ -1,5 +1,6 @@
 import {
     AfterContentInit,
+    AfterViewInit,
     ChangeDetectionStrategy,
     Component,
     forwardRef,
@@ -45,7 +46,7 @@ const MINIMUM_COLUMN_WIDTH = 200;
     ]
 })
 export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit,
-    GridType {
+    GridType, AfterViewInit {
 
     /** @hidden @internal */
     @ViewChild(IgxPivotHeaderRowComponent, { static: true })
@@ -109,6 +110,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         });
     }
 
+    public ngAfterViewInit() {
+        Promise.resolve().then(() => {
+            super.ngAfterViewInit();
+        });
+    }
+
     /** @hidden */
     public featureColumnsWidth() {
         return this.pivotRowWidths;
@@ -344,6 +351,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 ref.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
                 ref.instance.field = key;
                 ref.instance.parent = parent;
+                ref.instance.dataType = this.pivotConfiguration.values[0]?.dataType || this.resolveDataTypes(data[0][key]);
+                ref.instance.formatter = this.pivotConfiguration.values[0]?.formatter;
                 ref.changeDetectorRef.detectChanges();
                 columns.push(ref.instance);
                 if (this.hasMultipleValues) {
@@ -364,9 +373,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                     const refSibling = factoryColumn.create(this.viewRef.injector);
                     refSibling.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
                     refSibling.instance.field = key;
-                    refSibling.instance.dataType = this.resolveDataTypes(data[0][key]);
                     refSibling.instance.parent = parent;
                     refSibling.instance.hidden = true;
+                    refSibling.instance.dataType = this.pivotConfiguration.values[0]?.dataType || this.resolveDataTypes(data[0][key]);
+                    refSibling.instance.formatter = this.pivotConfiguration.values[0]?.formatter;
                     columns.push(refSibling.instance);
                 }
                 const children = this.generateColumnHierarchy(value.children, data, ref.instance);

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

@@ -1,3 +1,4 @@
+import { GridColumnDataType } from '../../data-operations/data-util';
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IPivotDimensionStrategy } from '../../data-operations/pivot-strategy';
 
@@ -42,7 +43,7 @@ export interface IPivotValue {
     // Allow conditionally styling of the IgxPivotGrid cells
     styles?: any;
     // Enables a data type specific template of the cells
-    dataType?: string;
+    dataType?: GridColumnDataType;
     // Applies display format to cell values.
     formatter?: (value: any, rowData?: any) => any;
 }

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

@@ -89,6 +89,10 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
     }
 
     public getCellClass(col: any) {
+        const configuration = this.grid.pivotConfiguration;
+        if (configuration.values.length === 1) {
+            return configuration.values[0].styles;
+        }
         const colName = col.field.split('-');
         const measureName = colName[colName.length - 1];
         return this.grid.pivotConfiguration.values.find(v => v.member === measureName)?.styles;
@@ -112,7 +116,9 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
         let header = null;
         if (typeof dim.member === 'string') {
             header = this.rowData[dim.member];
-        } else if (typeof dim.member === 'function'){
+        } else if (typeof dim.member === 'function' && dim.fieldName) {
+            header = this.rowData[dim.fieldName];
+        } else {
             header = dim.member.call(this, this.rowData);
         }
         const col = this._createColComponent(field, header, index, dim, lvl);

src/app/app.component.ts

@@ -540,6 +540,11 @@ export class AppComponent implements OnInit {
             icon: 'view_column',
             name: 'Pivot Grid'
         },
+        {
+            link: '/pivot-hierarchy',
+            icon: 'view_column',
+            name: 'Pivot Grid Hierarchy'
+        },
         {
             link: '/pivot-noop',
             icon: 'view_column',

src/app/app.module.ts

@@ -156,6 +156,7 @@ import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-gr
 import { PaginationSampleComponent } from './pagination/pagination.component';
 import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
 import { PivotGridSampleComponent } from './pivot-grid/pivot-grid.sample';
+import { PivotGridHierarchySampleComponent } from './pivot-grid-hierarchy/pivot-grid-hierarchy.sample';
 import { PivotGridNoopSampleComponent } from './pivot-grid-noop/pivot-grid-noop.sample';
 import { IgxStepperSampleComponent } from './stepper/stepper.sample';
 
@@ -294,6 +295,7 @@ const components = [
     GridColumnTypesSampleComponent,
     GridLocalizationSampleComponent,
     PivotGridSampleComponent,
+    PivotGridHierarchySampleComponent,
     PivotGridNoopSampleComponent,
     IgxStepperSampleComponent
 ];

src/app/app.routing.ts

@@ -96,6 +96,7 @@ import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-gr
 import { PaginationSampleComponent } from './pagination/pagination.component';
 import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
 import { PivotGridSampleComponent } from './pivot-grid/pivot-grid.sample';
+import { PivotGridHierarchySampleComponent } from './pivot-grid-hierarchy/pivot-grid-hierarchy.sample';
 import { PivotGridNoopSampleComponent } from './pivot-grid-noop/pivot-grid-noop.sample';
 import { IgxStepperSampleComponent } from './stepper/stepper.sample';
 
@@ -454,6 +455,10 @@ const appRoutes = [
         path: 'pivot',
         component: PivotGridSampleComponent
     },
+    {
+        path: 'pivotHierarchy',
+        component: PivotGridHierarchySampleComponent
+    },
     {
         path: 'pivot-noop',
         component: PivotGridNoopSampleComponent

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

@@ -0,0 +1,4 @@
+<div class="sample-column">
+    <igx-pivot-grid #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy">
+    </igx-pivot-grid>
+</div>

src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.scss

@@ -0,0 +1,21 @@
+:host ::ng-deep {
+    .upFont {
+        color: green;
+    }
+
+    .downFont {
+        color:red;
+    }
+
+    .upFont1 {
+        color: blue;
+    }
+
+    .downFont1 {
+        color:yellow;
+    }
+
+    .sample-column {
+        max-width: 900px;
+    }
+}

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

@@ -0,0 +1,59 @@
+import { Component, ViewChild } from '@angular/core';
+import { IgxNumberSummaryOperand, IgxPivotGridComponent, IPivotConfiguration } from 'igniteui-angular';
+import { DATA } from '../shared/pivot-data';
+
+@Component({
+    providers: [],
+    selector: 'app-pivot-grid-hierarchy-sample',
+    styleUrls: ['pivot-grid-hierarchy.sample.scss'],
+    templateUrl: 'pivot-grid-hierarchy.sample.html'
+})
+
+export class PivotGridHierarchySampleComponent {
+    @ViewChild('grid1', { static: true }) public grid1: IgxPivotGridComponent;
+
+    public pivotConfigHierarchy: IPivotConfiguration = {
+        columns: [{
+            member: () => 'All',
+            enabled: true,
+            childLevel:
+            {
+
+                member: (data) => data.Product.Name,
+                enabled: true,
+                childLevel:
+                {
+                    member: (data) => data.Seller.City,
+                    enabled: true,
+                }
+
+            }
+        },
+        ],
+        rows: [{
+            member: () => 'All',
+            enabled: true,
+            childLevel:
+            {
+                member: (data) => data.Seller.Name,
+                enabled: true,
+            }
+        }],
+        values: [
+            {
+                member: 'NumberOfUnits',
+                aggregate: IgxNumberSummaryOperand.sum,
+                enabled: true
+
+            }, {
+                member: 'Value',
+                aggregate: IgxNumberSummaryOperand.sum,
+                enabled: true,
+                formatter: (val) => val ? parseFloat(val).toFixed(2) : undefined
+            }
+        ],
+        filters: null
+    };
+
+    public origData = DATA;
+}

src/app/routing.ts

@@ -126,6 +126,7 @@ import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-gr
 import { PaginationSampleComponent } from './pagination/pagination.component';
 import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
 import { PivotGridSampleComponent } from './pivot-grid/pivot-grid.sample';
+import { PivotGridHierarchySampleComponent } from './pivot-grid-hierarchy/pivot-grid-hierarchy.sample';
 import { PivotGridNoopSampleComponent } from './pivot-grid-noop/pivot-grid-noop.sample';
 import { IgxStepperSampleComponent as StepperSampleComponent } from './stepper/stepper.sample';
 
@@ -608,6 +609,9 @@ const appRoutes = [
         component: PivotGridSampleComponent
     },
     {
+        path: 'pivot-hierarchy',
+        component: PivotGridHierarchySampleComponent
+    }, {
         path: 'pivot-noop',
         component: PivotGridNoopSampleComponent
     },