Handle expansion states for rows.

Author: MKirova

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

@@ -32,7 +32,7 @@
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | pivotGridFilter:pivotConfiguration.filters:filterStrategy:advancedFilteringExpressionsTree
-        | pivotGridRow:pivotConfiguration.rows:pivotConfiguration.values
+        | pivotGridRow:pivotConfiguration.rows:expansionStates:pivotConfiguration.values
         | pivotGridColumn:pivotConfiguration.columns:pivotConfiguration.values"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'

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

@@ -20,6 +20,7 @@ export class IgxPivotRowPipe implements PipeTransform {
     public transform(
         collection: any,
         rows: IPivotDimension[],
+        expansionStates: Map<any, boolean>,
         values?: IPivotValue[],
         pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
     ): any[] {
@@ -28,7 +29,7 @@ export class IgxPivotRowPipe implements PipeTransform {
         // apply aggregations based on the created groups
         // PivotUtil.applyAggregations(hierarchies, values, pivotKeys);
         // generate flat data from the hierarchies
-        const data = PivotUtil.flattenHierarchy(hierarchies, collection[0] ?? [], rows, pivotKeys);
+        const data = PivotUtil.flattenHierarchy(hierarchies, collection[0] ?? [], rows, pivotKeys, 0, expansionStates);
         return data;
     }
 }

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

@@ -100,9 +100,9 @@
     <ng-template #headerTemplate let-column>
         <div class="igx-grid__tr--header igx-grid__row-indentation--level-{{ level }}">
             <igx-icon *ngIf="hasChild" [attr.draggable]="false"
-                      (click)="grid.toggleRow(rowID)"
+                      (click)="grid.toggleRow(rowDimensionKey)"
                       style='cursor: pointer;'>
-                      {{grid.expansionStates.get(rowID) ? 'expand_more' : 'expand_less'}}</igx-icon>
+                      {{grid.expansionStates.get(rowDimensionKey) ? 'expand_more' : 'expand_less'}}</igx-icon>
             {{column.header}}
         </div>
     </ng-template>

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

@@ -54,6 +54,14 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
         return this.index;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public get rowDimensionKey(){
+        return this.rowDimension.map(x => x.header).join('_');
+    }
+
     public ngOnInit() {
         // generate rowDimension
         const rowDimConfig = this.grid.pivotConfiguration.rows;

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

@@ -61,7 +61,7 @@ export class PivotUtil {
         return result;
     }
 
-    public static flattenHierarchy(hierarchies, rec, dims, pivotKeys, level = 0) {
+    public static flattenHierarchy(hierarchies, rec, dims, pivotKeys, level = 0, expansionStates: Map<any, boolean>) {
         const flatData = [];
         for (const dim of dims) {
             hierarchies.forEach((h, key) => {
@@ -72,11 +72,15 @@ export class PivotUtil {
                 obj = {...obj, ...h[pivotKeys.aggregations]};
                 obj[pivotKeys.level] = level;
                 flatData.push(obj);
+                const isExpanded = expansionStates.get(key);
                 if (h[pivotKeys.children]) {
-                    obj[pivotKeys.records] = this.flattenHierarchy(h[pivotKeys.children], rec, dim.childLevels, pivotKeys, level + 1);
-                    for (const record of obj[pivotKeys.records]) {
-                        flatData.push(record);
-                    }
+                        obj[pivotKeys.records] = this.flattenHierarchy(h[pivotKeys.children], rec,
+                         dim.childLevels, pivotKeys, level + 1, expansionStates);
+                         if (isExpanded) {
+                            for (const record of obj[pivotKeys.records]) {
+                                flatData.push(record);
+                            }
+                         }
                 }
             });
         }