feat(IgxTreeGrid): allow show/hide summaryOnCollapse in tree grid #7334

IgniteUI · Jul 7, 2020 · 36e807b · 36e807b
1 parent a140e4b
commit 36e807b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -104,7 +104,7 @@
         | treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger
         | treeGridFlattening:id:expansionDepth:expansionStates:pipeTrigger
         | treeGridPaging:page:perPage:id:pipeTrigger
-        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger
+        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:id:pipeTrigger:summaryPipeTrigger
         | gridRowPinning:id:false:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer

diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts
@@ -23,27 +23,41 @@ export class IgxTreeGridSummaryPipe implements PipeTransform {
     public transform(flatData: ITreeGridRecord[],
         hasSummary: boolean,
         summaryCalculationMode: GridSummaryCalculationMode,
-        summaryPosition: GridSummaryPosition,
+        summaryPosition: GridSummaryPosition, showSummaryOnCollapse: boolean,
         id: string, pipeTrigger: number, summaryPipeTrigger: number): any[] {
         const grid: IgxTreeGridComponent = this.gridAPI.grid;
 
         if (!flatData || !hasSummary || summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly) {
             return flatData;
         }
 
-        return this.addSummaryRows(grid, flatData, summaryPosition);
+        return this.addSummaryRows(grid, flatData, summaryPosition, showSummaryOnCollapse);
     }
 
-    private addSummaryRows(grid: IgxTreeGridComponent, collection: ITreeGridRecord[], summaryPosition: GridSummaryPosition): any[] {
+    private addSummaryRows(grid: IgxTreeGridComponent, collection: ITreeGridRecord[],
+        summaryPosition: GridSummaryPosition, showSummaryOnCollapse: boolean): any[] {
         const recordsWithSummary = [];
         const maxSummaryHeight = grid.summaryService.calcMaxSummaryHeight();
 
         for (let i = 0; i < collection.length; i++) {
             const record = collection[i];
             recordsWithSummary.push(record);
 
+            const isCollapsed = !record.expanded && record.children && record.children.length > 0 && showSummaryOnCollapse;
+            if (isCollapsed) {
+                console.log(record.rowID, record.expanded);
+                let childData = record.children.filter(r => !r.isFilteredOutParent).map(r => r.data);
+                childData = this.removeDeletedRecord(grid, record.rowID, childData);
+                const summaries = grid.summaryService.calculateSummaries(record.rowID, childData);
+                const summaryRecord: ISummaryRecord = {
+                    summaries: summaries,
+                    max: maxSummaryHeight,
+                    cellIndentation: record.level + 1
+                };
+                recordsWithSummary.push(summaryRecord);
+                continue;
+            }
             const isExpanded = record.children && record.children.length > 0 && record.expanded;
-
             if (summaryPosition === GridSummaryPosition.bottom && !isExpanded) {
                 let childRecord = record;
                 let parent = record.parent;

diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html
@@ -11,6 +11,7 @@
             <div class="density-chooser" style="margin-bottom: 16px">
                 <igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)" style="display: block; width: 500px"></igx-buttongroup>
             </div>
+            <button (click)="grid1.showSummaryOnCollapse = !grid1.showSummaryOnCollapse"> {{ grid1.showSummaryOnCollapse }}</button>
 
             <igx-tree-grid #grid1 [allowFiltering]='true' [data]="data" primaryKey="employeeID" foreignKey="PID" [rowSelection]="selectionMode"
                 [paging]="false" [displayDensity]="density" [width]="'900px'" [height]="'800px'" [showToolbar]="true"