Merge from base.

Author: MKirova

projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts

@@ -37,6 +37,7 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
         let data;
         const prevRowDims = [];
         let prevDim;
+        let prevDimTopRecords = [];
         const currRows = cloneArray(rows, true);
         PivotUtil.assignLevels(currRows);
         for (const row of currRows) {
@@ -47,8 +48,10 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
                 data = PivotUtil.processHierarchy(hierarchies, collection[0] ?? [], pivotKeys, 0, true);
                 prevRowDims.push(row);
                 prevDim = row;
+                prevDimTopRecords = data;
             } else {
                 const newData = [...data];
+                const curDimTopRecords = [];
                 for (let i = 0; i < newData.length; i++) {
                     const currData = newData[i][prevDim.memberName + '_' + pivotKeys.records];
                     const leafData = PivotUtil.getDirectLeafs(currData, pivotKeys);
@@ -59,15 +62,23 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
                     PivotUtil.processSiblingProperties(newData[i], siblingData, pivotKeys);
 
                     PivotUtil.processSubGroups(row, prevRowDims.slice(0), siblingData, pivotKeys);
-                    if (PivotUtil.getDimensionDepth(prevDim) > PivotUtil.getDimensionDepth(row) && siblingData.length > 1) {
+                    if ((prevDimTopRecords[i].length != undefined && prevDimTopRecords[i].length < siblingData.length) || prevDimTopRecords.length < siblingData.length) {
+                        // Add the sibling data as child records because the previous dimension contains more dense version of the previous dimension records.
                         newData[i][row.memberName + '_' + pivotKeys.records] = siblingData;
                     } else {
+                        // Replace the current record with the sibling records because the current dimension is a denser version or produces the same amount of records.
                         newData.splice(i, 1, ...siblingData);
+                        // Shift the prevDimTopRecords item to the right because of the previous row transforms the newData and increases the elements in newData
+                        prevDimTopRecords.splice(siblingData.length, prevDimTopRecords.length - siblingData.length, ...prevDimTopRecords);
+                        // Increase the index the amount of sibling record that replaces the current one. Subtract 1 because there is already i++ in the for cycle.
                         i += siblingData.length - 1;
                     }
+                    // Add the current top sibling elements for the dimension
+                    curDimTopRecords.push(cloneArray(siblingData, true));
                 }
                 data = newData;
                 prevDim = row;
+                prevDimTopRecords = curDimTopRecords;
                 prevRowDims.push(row);
             }
         }

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -5909,51 +5909,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
-    protected _createColumn(col) {
-        let ref;
-        if (col instanceof IgxColumnGroupComponent) {
-            ref = this._createColGroupComponent(col);
-        } else {
-            ref = this._createColComponent(col);
-        }
-        return ref;
-    }
-
-    protected _createColGroupComponent(col: IgxColumnGroupComponent) {
-        const factoryGroup = this.resolver.resolveComponentFactory(IgxColumnGroupComponent);
-        const ref = this.viewRef.createComponent(factoryGroup, null, this.viewRef.injector);
-        ref.changeDetectorRef.detectChanges();
-        factoryGroup.inputs.forEach((input) => {
-            const propName = input.propName;
-            ref.instance[propName] = col[propName];
-        });
-        if (col.children.length > 0) {
-            const newChildren = [];
-            col.children.forEach(child => {
-                const newCol = this._createColumn(child).instance;
-                newCol.parent = ref.instance;
-                newChildren.push(newCol);
-            });
-            ref.instance.children.reset(newChildren);
-            ref.instance.children.notifyOnChanges();
-        }
-        return ref;
-    }
-
-    protected _createColComponent(col) {
-        const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
-        const ref = this.viewRef.createComponent(factoryColumn, null, this.viewRef.injector);
-        factoryColumn.inputs.forEach((input) => {
-            const propName = input.propName;
-            if (!(col[propName] instanceof IgxSummaryOperand)) {
-                ref.instance[propName] = col[propName];
-            } else {
-                ref.instance[propName] = col[propName].constructor;
-            }
-        });
-        return ref;
-    }
-
     protected switchTransactionService(val: boolean) {
         if (val) {
             this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.Base);

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

@@ -119,7 +119,7 @@
     <div class="igx-grid__tr--header">
         <igx-icon [attr.draggable]="false"
                   (click)="toggleColumn(column)">
-                  {{columnGroupStates.get(column.field) ? 'expand_more' : 'expand_less'}}</igx-icon>
+                  {{getColumnGroupExpandState(column) ? 'chevron_right' : 'expand_more'}}</igx-icon>
         {{column.header}}
     </div>
 </ng-template>

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

@@ -89,7 +89,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      * Emitted when the dimension collection is changed via the grid chip area.
      *
      * @remarks
-     * Returns the new dimension collection and its type: 
+     * Returns the new dimension collection and its type:
      * @example
      * ```html
      * <igx-pivot-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
@@ -309,17 +309,17 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     private p_id = `igx-pivot-grid-${NEXT_ID++}`;
 
 
-    /**
-    * Gets/Sets the default expand state for all rows.
-    */
-    @Input()
-    public get defaultExpandState() {
-        return this._defaultExpandState;
-    }
+     /**
+     * Gets/Sets the default expand state for all rows.
+     */
+      @Input()
+      public get defaultExpandState() {
+          return this._defaultExpandState;
+      }
 
-    public set defaultExpandState(val: boolean) {
-        this._defaultExpandState = val;
-    }
+      public set defaultExpandState(val: boolean) {
+          this._defaultExpandState = val;
+      }
 
     /**
      * @hidden @internal
@@ -935,24 +935,32 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return this.calcHeight;
     }
 
+    public getColumnGroupExpandState(col: IgxColumnComponent) {
+        const state = this.columnGroupStates.get(col.field);
+        // columns are expanded by default?
+        return state !== undefined && state !== null ? state : false;
+    }
+
     public toggleRowGroup(col: IgxColumnComponent, newState: boolean) {
         if (this.hasMultipleValues) {
-            const fieldColumns = col.children.filter(x => !x.columnGroup);
-            const groupColumns = col.children.filter(x => x.columnGroup);
-            groupColumns.forEach(groupColumn => {
-                groupColumn.hidden = newState;
-                this.resolveToggle(groupColumn);
-            });
-            fieldColumns.forEach(fieldColumn => {
-                fieldColumn.hidden = !newState;
-            });
+            const parentCols = col.parent ? col.parent.children.toArray() : this.columns.filter(x => x.level === 0);
+            const siblingCol = parentCols.filter(x => x.header === col.header && x !== col)[0];
+            const currIndex = parentCols.indexOf(col);
+            const siblingIndex = parentCols.indexOf(siblingCol);
+            if (currIndex < siblingIndex) {
+                // clicked on the full hierarchy header
+                this.resolveToggle(col, newState);
+                siblingCol.headerTemplate = this.headerTemplate;
+            } else {
+                // clicked on summary parent column that contains just the measures
+                col.headerTemplate = undefined;
+                this.resolveToggle(siblingCol, newState);
+            }
         } else {
             const parentCols = col.parent ? col.parent.children : this.columns.filter(x => x.level === 0);
             const fieldColumn = parentCols.filter(x => x.header === col.header && !x.columnGroup)[0];
             const groupColumn = parentCols.filter(x => x.header === col.header && x.columnGroup)[0];
-            groupColumn.hidden = newState;
-            this.resolveToggle(groupColumn);
-            fieldColumn.hidden = !newState;
+            this.resolveToggle(groupColumn, newState);
             if (newState) {
                 fieldColumn.headerTemplate = this.headerTemplate;
             } else {
@@ -970,16 +978,25 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         super.setupColumns();
     }
 
-    protected resolveToggle(groupColumn: IgxColumnComponent) {
-        const hasChildGroup = groupColumn.children.filter(x => x.columnGroup).length > 0;
-        if (!groupColumn.hidden && hasChildGroup) {
-            const fieldChildren = groupColumn.children.filter(x => !x.columnGroup);
-            const groupChildren = groupColumn.children.filter(x => x.columnGroup);
-            groupChildren.forEach(group => {
-                this.resolveToggle(group);
-            });
-            fieldChildren.forEach(fieldChild => {
-                fieldChild.hidden = true;
+    protected resolveToggle(groupColumn: IgxColumnComponent, state: boolean) {
+        groupColumn.hidden = state;
+        this.columnGroupStates.set(groupColumn.field, state);
+        const childrenTotal = this.hasMultipleValues ?
+         groupColumn.children.filter(x => x.columnGroup && x.children.filter(y => !y.columnGroup).length === this.values.length) :
+         groupColumn.children.filter(x => !x.columnGroup);
+         const childrenSubgroups = this.hasMultipleValues ?
+         groupColumn.children.filter(x => x.columnGroup && x.children.filter(y => !y.columnGroup).length === 0) :
+         groupColumn.children.filter(x => x.columnGroup);
+         childrenTotal.forEach(group => {
+            if (state) {
+                group.headerTemplate = this.headerTemplate;
+            } else {
+                group.headerTemplate = undefined;
+            }
+         });
+        if (!groupColumn.hidden && childrenSubgroups.length > 0) {
+            childrenSubgroups.forEach(group => {
+                this.resolveToggle(group, state);
             });
         }
     }
@@ -1106,7 +1123,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 ref.instance.header = parent != null ? key.split(parent.header + this.pivotKeys.columnDimensionSeparator)[1] : key;
                 ref.instance.field = key;
                 ref.instance.parent = parent;
-                ref.instance.width = value.dimension.width || MINIMUM_COLUMN_WIDTH + 'px';
+                ref.instance.width = value.dimension?.width || MINIMUM_COLUMN_WIDTH + 'px';
                 ref.instance.dataType = this.pivotConfiguration.values[0]?.dataType || this.resolveDataTypes(data[0][key]);
                 ref.instance.formatter = this.pivotConfiguration.values[0]?.formatter;
                 ref.instance.sortable = true;
@@ -1127,31 +1144,46 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 if (value.expandable) {
                     ref.instance.headerTemplate = this.headerTemplate;
                 }
-                if (!this.hasMultipleValues) {
-                    const refSibling = factoryColumn.create(this.viewRef.injector);
-                    refSibling.instance.header = parent != null ? key.split(parent.header + this.pivotKeys.columnDimensionSeparator)[1] : key;
-                    refSibling.instance.field = key;
-                    refSibling.instance.parent = parent;
-                    ref.instance.width = value.dimension.width || MINIMUM_COLUMN_WIDTH + 'px';
-                    ref.instance.sortable = true;
-                    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);
                 const filteredChildren = children.filter(x => x.level === ref.instance.level + 1);
                 ref.changeDetectorRef.detectChanges();
                 columns.push(ref.instance);
                 if (this.hasMultipleValues) {
-                    const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, true, value.dimension.width);
-                    const nestedChildren = filteredChildren.concat(measureChildren);
-                    const allChildren = children.concat(measureChildren);
+                    let measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, true, value.dimension.width);
+                    const nestedChildren = filteredChildren;
+                    //const allChildren = children.concat(measureChildren);
                     ref.instance.children.reset(nestedChildren);
-                    columns = columns.concat(allChildren);
+                    columns = columns.concat(children);
+                    if (value.dimension.childLevel) {
+                        const refSibling = factoryColumnGroup.create(this.viewRef.injector);
+                        refSibling.instance.header = parent != null ? key.split(parent.header + this.pivotKeys.columnDimensionSeparator)[1] : key;
+                        refSibling.instance.field = key;
+                        refSibling.instance.parent = parent;
+                        ref.instance.width = value.dimension?.width || MINIMUM_COLUMN_WIDTH + 'px';
+                        ref.instance.sortable = 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);
+
+                        measureChildren = this.getMeasureChildren(factoryColumn, data, refSibling.instance, false, value.dimension?.width);
+                        refSibling.instance.children.reset(measureChildren);
+                        columns = columns.concat(measureChildren);
+                    }
+
                 } else {
                     ref.instance.children.reset(filteredChildren);
                     columns = columns.concat(children);
+                    if (value.dimension.childLevel) {
+                        const refSibling = factoryColumn.create(this.viewRef.injector);
+                        refSibling.instance.header = parent != null ? key.split(parent.header + this.pivotKeys.columnDimensionSeparator)[1] : key;
+                        refSibling.instance.field = key;
+                        refSibling.instance.parent = parent;
+                        ref.instance.width = value.dimension?.width || MINIMUM_COLUMN_WIDTH + 'px';
+                        ref.instance.sortable = 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);
+                    }
                 }
             }
         });

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

@@ -69,7 +69,7 @@ export class IgxPivotRowExpansionPipe implements PipeTransform {
         for (const row of enabledRows) {
             const lvl = PivotUtil.getDimensionDepth(row);
             totalLlv += lvl;
-            PivotUtil.flattenHierarchy(data, config, row, expansionStates, defaultExpand, pivotKeys, totalLlv, prevDims, 0);
+            PivotUtil.flattenHierarchy(data, config, row, expansionStates, defaultExpand, pivotKeys, totalLlv, prevDims, 0, lvl);
             prevDims.push(row);
         }
         const finalData = config.columnStrategy ? data : data.filter(x => x[pivotKeys.records]);