Add additional summary column for columns with children, that is always visible and shows the parent's aggregates.

Author: MKirova

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

@@ -907,22 +907,34 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     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
+                const groupColumns = col.children.filter(x => x.columnGroup);
+                groupColumns.forEach(groupColumn => {
+                    groupColumn.hidden = newState;
+                    this.resolveToggle(groupColumn);
+                });
+
+                siblingCol.headerTemplate = this.headerTemplate;
+            } else {
+                // clicked on summary parent column that contains just the measures
+                col.headerTemplate = undefined;
+                const groupColumns = siblingCol.children.filter(x => x.columnGroup);
+                groupColumns.forEach(groupColumn => {
+                    groupColumn.hidden = newState;
+                    this.resolveToggle(groupColumn);
+                });
+            }
         } 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;
             if (newState) {
                 fieldColumn.headerTemplate = this.headerTemplate;
             } else {
@@ -943,14 +955,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     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;
-            });
         }
     }
 
@@ -1095,31 +1103,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 + '-')[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 + '-')[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 + '-')[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);
+                    }
                 }
             }
         });