Apply more complex row dimension key for expand/collapse based on previous dimensions.

Author: MKirova

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

@@ -1,8 +1,7 @@
 import { GridColumnDataType } from '../../data-operations/data-util';
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IPivotDimensionStrategy } from '../../data-operations/pivot-strategy';
-
-
+import { IgxColumnComponent } from '../columns/column.component';
 
 export type PivotAggregation = (members: any[], data: any[]) => any;
 
@@ -57,3 +56,9 @@ export enum PivotDimensionType {
     Row,
     Column
 }
+
+export interface IPivotDimensionData {
+    column: IgxColumnComponent;
+    dimension: IPivotDimension;
+    prevDimensions: IPivotDimension[];
+}

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

@@ -16,7 +16,7 @@ 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';
+import { IPivotDimension, IPivotDimensionData } from './pivot-grid.interface';
 import { PivotUtil } from './pivot-util';
 
 
@@ -41,7 +41,11 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
      @ViewChild('headerTemplateGray', { read: TemplateRef, static: true })
      public headerTemplateGray: TemplateRef<any>;
 
-    public rowDimension: IgxColumnComponent[] = [];
+    public rowDimensionData: IPivotDimensionData[] = [];
+
+    public get rowDimension() {
+        return this.rowDimensionData?.map(x => x.column);
+    }
 
     constructor(
         public gridAPI: GridBaseAPIService<IgxPivotGridComponent>,
@@ -66,7 +70,8 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
      * @internal
      */
     public getRowDimensionKey(col: IgxColumnComponent) {
-            const key =  PivotUtil.getRecordKey(this.rowData, this.rowData[col.field]);
+            const dimData = this.rowDimensionData.find(x => x.column === col);
+            const key =  PivotUtil.getRecordKey(this.rowData, dimData.dimension, dimData.prevDimensions);
             return key;
     }
 
@@ -82,7 +87,7 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
     public ngOnChanges(changes: SimpleChanges) {
         if (changes.rowData) {
             // generate new rowDimension on row data change
-            this.rowDimension = [];
+            this.rowDimensionData = [];
             const rowDimConfig = this.grid.pivotConfiguration.rows;
             this.extractFromDimensions(rowDimConfig, 0);
         }
@@ -102,12 +107,19 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
         let dimIndex = 0;
         let currentLvl = 0;
         currentLvl += level;
+        const prev = [];
         for (const dim of rowDimConfig) {
             const dimData = PivotUtil.getDimensionLevel(dim, this.rowData,
                   { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'});
             dimIndex += dimData.level;
             currentLvl += dimData.level;
-            this.rowDimension.push(this.extractFromDimension(dimData.dimension, dimIndex, currentLvl));
+            const column = this.extractFromDimension(dimData.dimension, dimIndex, currentLvl);
+            this.rowDimensionData.push({
+                column,
+                dimension: dimData.dimension,
+                prevDimensions: [...prev]
+            });
+            prev.push(dimData.dimension);
         }
     }
 

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

@@ -60,7 +60,7 @@ export class PivotUtil {
                 continue;
             }
             rec[field + '_' + pivotKeys.level] = currDimLvl;
-            const expansionRowKey = PivotUtil.getRecordKey(rec, rec[field]);
+            const expansionRowKey = PivotUtil.getRecordKey(rec, dim, prevDims);
             const isExpanded = expansionStates.get(expansionRowKey) === undefined ?
                 defaultExpandState :
                 expansionStates.get(expansionRowKey);
@@ -299,20 +299,17 @@ export class PivotUtil {
         return leafs;
     }
 
-    public static getRecordKey(rec, key) {
-        const pivotKeys = { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' };
+    public static getRecordKey(rec, currentDim: IPivotDimension, prevDims: IPivotDimension[]) {
         const parentFields = [];
-        for (const property in rec) {
-            if (rec.hasOwnProperty(property) &&
-                Object.keys(pivotKeys).indexOf(property) === -1
-                && Object.keys(pivotKeys).filter(x => property.indexOf(x) !== -1).length === 0) {
-                const currLevel = rec[property + '_level'];
-                if (currLevel > 0) {
-                    parentFields.unshift(rec[property]);
-                }
-            }
+        const field = currentDim.memberName;
+        const value = rec[field];
+        for(const prev of prevDims) {
+            const dimData = PivotUtil.getDimensionLevel(prev, rec,
+                { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'});
+                parentFields.push(rec[dimData.dimension.memberName]);
         }
-        return parentFields.concat(key).join('_');
+        parentFields.push(value);
+        return parentFields.join('_');
     }
 
     public static getTotalLvl(rec) {

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

@@ -14,28 +14,32 @@ export class PivotGridHierarchySampleComponent {
 
     public pivotConfigHierarchy: IPivotConfiguration = {
         columns: [{
-            member: () => 'All',
+            memberName: 'AllProducts',
+            memberFunction: () => 'All',
             enabled: true,
             childLevel:
             {
-
-                member: (data) => data.Product.Name,
+                memberName: 'Product',
+                memberFunction: (data) => data.Product.Name,
                 enabled: true,
                 childLevel:
                 {
-                    member: (data) => data.Seller.City,
+                    memberName: 'City',
+                    memberFunction: (data) => data.Seller.City,
                     enabled: true,
                 }
 
             }
         },
         ],
         rows: [{
-            member: () => 'All',
+            memberName: 'AllSeller',
+            memberFunction: () => 'All',
             enabled: true,
             childLevel:
             {
-                member: (data) => data.Seller.Name,
+                memberName: 'Seller',
+                memberFunction: (data) => data.Seller.Name,
                 enabled: true,
             }
         }],

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

@@ -30,35 +30,20 @@ export class PivotGridSampleComponent {
             }
         ]
         ,
-        rows: [
-            {
-                memberName: 'AllProd',
-                memberFunction: () => 'AllProd',
-                enabled: true,
-                childLevel: {
+        rows: [{
+            memberName: 'City',
+            enabled: true
+        }, {
+            memberFunction: () => 'All',
+            memberName: 'AllProducts',
+            enabled: true,
+            childLevel:
+                {
+                    memberFunction: (data) => data.ProductCategory,
                     memberName: 'ProductCategory',
                     enabled: true
                 }
-            },
-            {
-                memberName: 'AllDate',
-                memberFunction: () => 'AllDate',
-                enabled: true,
-                childLevel: {
-                    memberName: 'Date',
-                    enabled: true
-                }
-            },
-            {
-                memberName: 'AllSel',
-                memberFunction: () => 'AllSel',
-                enabled: true,
-                childLevel: {
-                    memberName: 'SellerName',
-                    enabled: true
-                }
-            }
-        ],
+        }],
         values: [
             {
                 member: 'UnitsSold',