Merge pull request #10420 from IgniteUI/mkirova/fix-expand-rowid

Apply more complex row dimension key for expand/collapse based on pre…

Author: dkamburov

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;
 
@@ -60,3 +59,9 @@ export enum PivotDimensionType {
     Column,
     Filter
 }
+
+export interface IPivotDimensionData {
+    column: IgxColumnComponent;
+    dimension: IPivotDimension;
+    prevDimensions: IPivotDimension[];
+}

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

@@ -15,7 +15,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';
 
 
@@ -40,7 +40,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>,
@@ -65,7 +69,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;
     }
 
@@ -81,7 +86,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.rowDimensions;
             this.extractFromDimensions(rowDimConfig, 0);
         }
@@ -101,12 +106,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/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',