Add handling for levels and expand/collapse indicators.

Author: MKirova

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

@@ -94,4 +94,16 @@
             [cellSelectionMode]="grid.cellSelection"
             [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)">
         </igx-grid-cell>
+    </ng-template>
+
+
+    <ng-template #headerTemplate let-column>
+        <div class="header-group-template__container">
+            <igx-icon [attr.draggable]="false"
+                      (click)="grid.toggleRow(rowID)"
+                      style='cursor: pointer;'
+                      class="header-group-template__icon">
+                      {{grid.expansionStates.get(rowID) ? 'expand_more' : 'expand_less'}}</igx-icon>
+            {{column.header}}
+        </div>
     </ng-template>

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

@@ -6,12 +6,15 @@ import {
     ElementRef,
     forwardRef,
     OnInit,
+    TemplateRef,
+    ViewChild,
     ViewContainerRef
 } from '@angular/core';
 import { IgxPivotGridComponent } from './pivot-grid.component';
 import { IgxRowDirective } from '../row.directive';
 import { GridBaseAPIService, IgxColumnComponent } from '../hierarchical-grid/public_api';
 import { IgxGridSelectionService } from '../selection/selection.service';
+import { IPivotDimension } from './pivot-grid.interface';
 
 
 const MINIMUM_COLUMN_WIDTH = 136;
@@ -23,8 +26,15 @@ const MINIMUM_COLUMN_WIDTH = 136;
 })
 export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent> implements OnInit {
 
+    /**
+     * @hidden @internal
+     */
+     @ViewChild('headerTemplate', { read: TemplateRef, static: true })
+     public headerTemplate: TemplateRef<any>;
 
     public rowDimension: IgxColumnComponent[] = [];
+    public level = 0;
+    protected hasChild = false;
 
     constructor(
         public gridAPI: GridBaseAPIService<IgxPivotGridComponent>,
@@ -36,7 +46,6 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
     ){
         super(gridAPI, selectionService, element, cdr);
     }
-
     /**
      * @hidden
      * @internal
@@ -48,24 +57,43 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
     public ngOnInit() {
         // generate rowDimension
         const rowDimConfig = this.grid.pivotConfiguration.rows;
-        let field = null;
+        this.level = this.rowData['level'] || 0;
+        this.hasChild = this.rowData['records'] != null && this.rowData['records'].length > 0;
+        this.extractFromDimensions(rowDimConfig, 0);
+    }
+
+    protected extractFromDimensions(rowDimConfig: IPivotDimension[], level: number){
         for (const dim of rowDimConfig) {
-            if (typeof dim.member === 'string') {
-                field = this.rowData[dim.member];
-            } else if (typeof dim.member === 'function'){
-                field = dim.member.call(this, this.rowData);
+            if  (level === this.level) {
+                this.rowDimension.push(this.extractFromDimension(dim));
+            } else {
+                level++;
+                this.extractFromDimensions(dim.childLevels, level);
             }
-            const col = this._createColComponent(field);
-            this.rowDimension.push(col);
         }
     }
 
+    protected extractFromDimension(dim: IPivotDimension) {
+        let field = null;
+        if (typeof dim.member === 'string') {
+            field = this.rowData[dim.member];
+        } else if (typeof dim.member === 'function'){
+            field = dim.member.call(this, this.rowData);
+        }
+        const col = this._createColComponent(field);
+        return col;
+    }
+
     protected _createColComponent(field: string) {
         const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
         const ref = this.viewRef.createComponent(factoryColumn, null, this.viewRef.injector);
         ref.instance.field = field;
+        ref.instance.header = field;
         ref.instance.width = MINIMUM_COLUMN_WIDTH + 'px';
         (ref as any).instance._vIndex = this.grid.columns.length + this.index;
+        if (this.hasChild) {
+            ref.instance.headerTemplate = this.headerTemplate;
+        }
         return ref.instance;
     }
 }

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

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

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

@@ -33,6 +33,33 @@ export class PivotGridSampleComponent {
         filters: null
     };
 
+    public pivotConfigHierarchy: IPivotConfiguration = {
+        columns: [{
+            member: 'Country',
+            enabled: true,
+            childLevels:[]
+        }],
+        rows: [{
+            member: () => 'All',
+            enabled: true,
+            childLevels:[
+                {
+                    member: (data) => data.ProductCategory,
+                    enabled: true,
+                    childLevels:[]
+                }
+            ]
+        }],
+        values: [
+            {
+                member: 'UnitsSold',
+                aggregate: IgxNumberSummaryOperand.sum,
+                enabled: true
+            }
+        ],
+        filters: null
+    };
+
     public origData = [
         { ProductCategory: 'Clothing', UnitPrice: 12.81, SellerName: 'Stanley', Country: 'Bulgaria', Date: '01/01/2021', UnitsSold: 282 },
         { ProductCategory: 'Clothing', UnitPrice: 49.57, SellerName: 'Elisa', Country: 'USA', Date: '01/05/2019', UnitsSold: 296 },
@@ -52,10 +79,15 @@ export class PivotGridSampleComponent {
     ];
 
     public dataHierarchical =  [
-        { ProductCategory: 'All', Bulgaria: 774, USA: 829, Uruguay: 524 },
-        { ProductCategory: 'Clothing', Bulgaria: 774, USA: 296, Uruguay: 456 },
-        { ProductCategory: 'Bikes', Uruguay: 68 },
-        { ProductCategory: 'Accessories', USA: 293 },
-        { ProductCategory: 'Components', USA: 240 }
+        { ProductCategory: 'All', Bulgaria: 774, USA: 829, Uruguay: 524, level: 0, records: [
+            { ProductCategory: 'Clothing', Bulgaria: 774, USA: 296, Uruguay: 456, level: 1  },
+            { ProductCategory: 'Bikes', Uruguay: 68, level: 1  },
+            { ProductCategory: 'Accessories', USA: 293, level: 1  },
+            { ProductCategory: 'Components', USA: 240, level: 1  }
+        ] },
+        { ProductCategory: 'Clothing', Bulgaria: 774, USA: 296, Uruguay: 456, level: 1  },
+        { ProductCategory: 'Bikes', Uruguay: 68, level: 1  },
+        { ProductCategory: 'Accessories', USA: 293, level: 1  },
+        { ProductCategory: 'Components', USA: 240, level: 1  }
     ];
 }