Skip to content

Commit 80c805b

Browse files
ddinchevazdrawku
ddincheva
and
zdrawku
authored
Allow to show/hide summary row when the group/parent row is collapsed (#7750)
* feat(grid): Allow to show/hide summary row when the group/parent row is collapsed Co-authored-by: Zdravko Kolev <[email protected]>
1 parent 5053978 commit 80c805b

File tree

11 files changed

+266
-13
lines changed

11 files changed

+266
-13
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ All notable changes for each version of this project will be documented in this
1919
- Removed `onDataPreLoad` event as it is specific for remote virtualization implementation, which is not supported for the `igxTreeGrid`. A more generic `onScroll` event is exposed and can be used instead.
2020

2121
### New Features
22+
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
23+
- Introduced `showSummaryOnCollapse` grid property which allows you to control whether the summary row stays visible when the groupBy / parent row is collapsed.
2224
- `IgxGridState` directive
2325
- Added support for expansion states, column selection and row pinning.
2426
- Added support for `IgxTreeGrid` and `IgxHierarchicalGrid` (including child grids)

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1026,6 +1026,26 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
10261026
}
10271027
}
10281028

1029+
/**
1030+
* Controls whether the summary row is visible when groupBy/parent row is collapsed.
1031+
* @example
1032+
* ```html
1033+
* <igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid>
1034+
* ```
1035+
* @remarks
1036+
* By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible
1037+
* when the groupBy/parent row is collapsed.
1038+
*/
1039+
@Input()
1040+
get showSummaryOnCollapse() {
1041+
return this._showSummaryOnCollapse;
1042+
}
1043+
1044+
set showSummaryOnCollapse(value: boolean) {
1045+
this._showSummaryOnCollapse = value;
1046+
this.notifyChanges();
1047+
}
1048+
10291049
/**
10301050
* Gets/Sets the filtering strategy of the grid.
10311051
* @example
@@ -2625,6 +2645,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
26252645

26262646
private _summaryPosition = GridSummaryPosition.bottom;
26272647
private _summaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;
2648+
private _showSummaryOnCollapse = false;
26282649
private _cellSelectionMode = GridSelectionMode.multiple;
26292650
private _rowSelectionMode = GridSelectionMode.none;
26302651
private _columnSelectionMode = GridSelectionMode.none;

‎projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1759,6 +1759,112 @@ describe('IgxGrid - Summaries #grid', () => {
17591759
expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(5);
17601760
});
17611761

1762+
it('should show summaries when group row is collapsed', () => {
1763+
expect(grid.showSummaryOnCollapse).toBe(false);
1764+
expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(3);
1765+
const groupRows = grid.groupsRowList.toArray();
1766+
grid.showSummaryOnCollapse = true;
1767+
fix.detectChanges();
1768+
1769+
groupRows[0].toggle();
1770+
fix.detectChanges();
1771+
1772+
expect(groupRows[0].expanded).toBe(false);
1773+
expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(4);
1774+
let summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 1);
1775+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
1776+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
1777+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
1778+
['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
1779+
1780+
groupRows[0].toggle();
1781+
fix.detectChanges();
1782+
1783+
expect(groupRows[0].expanded).toBe(true);
1784+
expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(3);
1785+
summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 3);
1786+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
1787+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
1788+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
1789+
['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
1790+
});
1791+
1792+
it('should be able to change showSummaryOnCollapse run time', () => {
1793+
expect(grid.showSummaryOnCollapse).toBe(false);
1794+
expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(3);
1795+
const groupRows = grid.groupsRowList.toArray();
1796+
fix.detectChanges();
1797+
1798+
groupRows[0].toggle();
1799+
fix.detectChanges();
1800+
1801+
expect(groupRows[0].expanded).toBe(false);
1802+
expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(3);
1803+
1804+
grid.showSummaryOnCollapse = true;
1805+
fix.detectChanges();
1806+
1807+
expect(grid.showSummaryOnCollapse).toBe(true);
1808+
expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(4);
1809+
const summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 1);
1810+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
1811+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
1812+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
1813+
['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
1814+
});
1815+
1816+
1817+
it('should correctly position summary row when group row is collapsed', () => {
1818+
grid.showSummaryOnCollapse = true;
1819+
fix.detectChanges();
1820+
grid.groupBy({ fieldName: 'OnPTO', dir: SortingDirection.Asc, ignoreCase: false });
1821+
fix.detectChanges();
1822+
1823+
let summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 4);
1824+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
1825+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
1826+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
1827+
['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
1828+
1829+
summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 5);
1830+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
1831+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
1832+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
1833+
['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
1834+
1835+
const groupRows = grid.groupsRowList.toArray();
1836+
groupRows[1].toggle();
1837+
fix.detectChanges();
1838+
1839+
summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 2);
1840+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
1841+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
1842+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
1843+
['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
1844+
1845+
summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 3);
1846+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
1847+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
1848+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
1849+
['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
1850+
1851+
grid.summaryPosition = 'top';
1852+
fix.detectChanges();
1853+
1854+
summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 1);
1855+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
1856+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
1857+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
1858+
['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
1859+
1860+
summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 3);
1861+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
1862+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
1863+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
1864+
['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
1865+
1866+
});
1867+
17621868
it('should be able to enable/disable summaries at runtime', () => {
17631869
grid.getColumnByName('Age').hasSummary = false;
17641870
grid.getColumnByName('ParentID').hasSummary = false;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@
138138
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
139139
| gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
140140
| gridPaging:page:perPage:id:pipeTrigger
141-
| gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger
141+
| gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
142142
| gridDetails:hasDetails:expansionStates:pipeTrigger
143143
| gridRowPinning:id:false:pipeTrigger"
144144
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'

‎projects/igniteui-angular/src/lib/grids/grid/grid.summary.pipe.ts

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,16 @@ export class IgxGridSummaryPipe implements PipeTransform {
3030
hasSummary: boolean,
3131
summaryCalculationMode: GridSummaryCalculationMode,
3232
summaryPosition: GridSummaryPosition,
33-
id: string, pipeTrigger: number, summaryPipeTrigger: number): any[] {
33+
id: string, showSummary, pipeTrigger: number, summaryPipeTrigger: number): any[] {
3434

3535
if (!collection.data || !hasSummary || summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly) {
3636
return collection.data;
3737
}
3838

39-
return this.addSummaryRows(id, collection, summaryPosition);
39+
return this.addSummaryRows(id, collection, summaryPosition, showSummary);
4040
}
4141

42-
private addSummaryRows(gridId: string, collection: IGroupByResult, summaryPosition: GridSummaryPosition): any[] {
42+
private addSummaryRows(gridId: string, collection: IGroupByResult, summaryPosition: GridSummaryPosition, showSummary): any[] {
4343
const recordsWithSummary = [];
4444
const lastChildMap = new Map<any, IGroupByRecord[]>();
4545
const grid: IgxGridComponent = this.gridAPI.grid;
@@ -73,6 +73,15 @@ export class IgxGridSummaryPipe implements PipeTransform {
7373
recordsWithSummary.push(record);
7474
}
7575

76+
if (summaryPosition === GridSummaryPosition.bottom && showSummary && (groupByRecord && !grid.isExpandedGroup(groupByRecord))) {
77+
const records = this.removeDeletedRecord(grid, groupByRecord.records.slice());
78+
const summaries = grid.summaryService.calculateSummaries(recordId, records);
79+
const summaryRecord: ISummaryRecord = {
80+
summaries: summaries,
81+
max: maxSummaryHeight
82+
};
83+
recordsWithSummary.push(summaryRecord);
84+
}
7685
if (summaryPosition === GridSummaryPosition.bottom && lastChildMap.has(recordId)) {
7786
const groupRecords = lastChildMap.get(recordId);
7887

@@ -89,7 +98,8 @@ export class IgxGridSummaryPipe implements PipeTransform {
8998
}
9099
}
91100

92-
if (groupByRecord === null || !grid.isExpandedGroup(groupByRecord)) {
101+
const showSummaries = showSummary ? false : (groupByRecord && !grid.isExpandedGroup(groupByRecord));
102+
if (groupByRecord === null || showSummaries) {
93103
continue;
94104
}
95105

@@ -123,7 +133,6 @@ export class IgxGridSummaryPipe implements PipeTransform {
123133
groupRecords.unshift(groupByRecord);
124134
}
125135
}
126-
127136
return recordsWithSummary;
128137
}
129138

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-summaries.spec.ts

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,99 @@ describe('IgxTreeGrid - Summaries #tGrid', () => {
163163
expect(GridSummaryFunctions.getAllVisibleSummariesRowIndexes(fix)).toEqual([6, 7, rootSummaryIndex]);
164164
});
165165

166+
it('should be able to show/hide summaries for collapsed parent rows runtime', () => {
167+
treeGrid.summaryCalculationMode = 'childLevelsOnly';
168+
fix.detectChanges();
169+
170+
let summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
171+
expect(summaries.length).toBe(0);
172+
173+
treeGrid.showSummaryOnCollapse = true;
174+
fix.detectChanges();
175+
176+
summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
177+
expect(summaries.length).toBe(4);
178+
179+
treeGrid.showSummaryOnCollapse = false;
180+
fix.detectChanges();
181+
182+
summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
183+
expect(summaries.length).toBe(0);
184+
});
185+
186+
it('should position correctly summary row for collapsed rows -- bottom position', () => {
187+
treeGrid.expandAll();
188+
fix.detectChanges();
189+
190+
treeGrid.summaryCalculationMode = 'childLevelsOnly';
191+
fix.detectChanges();
192+
193+
let summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
194+
expect(summaries.length).toBe(4);
195+
196+
treeGrid.showSummaryOnCollapse = true;
197+
fix.detectChanges();
198+
199+
treeGrid.toggleRow(treeGrid.getRowByIndex(3).rowID);
200+
fix.detectChanges();
201+
202+
summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
203+
expect(summaries.length).toBe(4);
204+
205+
let summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 4);
206+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
207+
['Count', 'Earliest', 'Latest'], ['2', 'Nov 11, 2009', 'Oct 17, 2015']);
208+
209+
summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 5);
210+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
211+
['Count', 'Earliest', 'Latest'], ['3', 'Jul 19, 2009', 'Sep 18, 2014']);
212+
213+
treeGrid.summaryPosition = 'top';
214+
fix.detectChanges();
215+
216+
summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
217+
expect(summaries.length).toBe(4);
218+
219+
summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 1);
220+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
221+
['Count', 'Earliest', 'Latest'], ['3', 'Jul 19, 2009', 'Sep 18, 2014']);
222+
223+
summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 5);
224+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
225+
['Count', 'Earliest', 'Latest'], ['2', 'Nov 11, 2009', 'Oct 17, 2015']);
226+
});
227+
228+
it('should position correctly summary row for collapsed rows -- top position', () => {
229+
treeGrid.expandAll();
230+
fix.detectChanges();
231+
232+
treeGrid.summaryCalculationMode = 'childLevelsOnly';
233+
fix.detectChanges();
234+
235+
treeGrid.showSummaryOnCollapse = true;
236+
fix.detectChanges();
237+
238+
let summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
239+
expect(summaries.length).toBe(4);
240+
241+
treeGrid.toggleRow(treeGrid.getRowByIndex(3).rowID);
242+
fix.detectChanges();
243+
244+
treeGrid.summaryPosition = 'top';
245+
fix.detectChanges();
246+
247+
summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
248+
expect(summaries.length).toBe(4);
249+
250+
let summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 1);
251+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
252+
['Count', 'Earliest', 'Latest'], ['3', 'Jul 19, 2009', 'Sep 18, 2014']);
253+
254+
summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 5);
255+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
256+
['Count', 'Earliest', 'Latest'], ['2', 'Nov 11, 2009', 'Oct 17, 2015']);
257+
});
258+
166259
it('should be able to enable/disable summaries at runtime', () => {
167260
treeGrid.expandAll();
168261
fix.detectChanges();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
| treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger
105105
| treeGridFlattening:id:expansionDepth:expansionStates:pipeTrigger
106106
| treeGridPaging:page:perPage:id:pipeTrigger
107-
| treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger
107+
| treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:id:pipeTrigger:summaryPipeTrigger
108108
| gridRowPinning:id:false:pipeTrigger"
109109
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
110110
[igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer>

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe.ts

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,27 +23,39 @@ export class IgxTreeGridSummaryPipe implements PipeTransform {
2323
public transform(flatData: ITreeGridRecord[],
2424
hasSummary: boolean,
2525
summaryCalculationMode: GridSummaryCalculationMode,
26-
summaryPosition: GridSummaryPosition,
26+
summaryPosition: GridSummaryPosition, showSummaryOnCollapse: boolean,
2727
id: string, pipeTrigger: number, summaryPipeTrigger: number): any[] {
2828
const grid: IgxTreeGridComponent = this.gridAPI.grid;
2929

3030
if (!flatData || !hasSummary || summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly) {
3131
return flatData;
3232
}
3333

34-
return this.addSummaryRows(grid, flatData, summaryPosition);
34+
return this.addSummaryRows(grid, flatData, summaryPosition, showSummaryOnCollapse);
3535
}
3636

37-
private addSummaryRows(grid: IgxTreeGridComponent, collection: ITreeGridRecord[], summaryPosition: GridSummaryPosition): any[] {
37+
private addSummaryRows(grid: IgxTreeGridComponent, collection: ITreeGridRecord[],
38+
summaryPosition: GridSummaryPosition, showSummaryOnCollapse: boolean): any[] {
3839
const recordsWithSummary = [];
3940
const maxSummaryHeight = grid.summaryService.calcMaxSummaryHeight();
4041

4142
for (let i = 0; i < collection.length; i++) {
4243
const record = collection[i];
4344
recordsWithSummary.push(record);
4445

46+
const isCollapsed = !record.expanded && record.children && record.children.length > 0 && showSummaryOnCollapse;
47+
if (isCollapsed) {
48+
let childData = record.children.filter(r => !r.isFilteredOutParent).map(r => r.data);
49+
childData = this.removeDeletedRecord(grid, record.rowID, childData);
50+
const summaries = grid.summaryService.calculateSummaries(record.rowID, childData);
51+
const summaryRecord: ISummaryRecord = {
52+
summaries: summaries,
53+
max: maxSummaryHeight,
54+
cellIndentation: record.level + 1
55+
};
56+
recordsWithSummary.push(summaryRecord);
57+
}
4558
const isExpanded = record.children && record.children.length > 0 && record.expanded;
46-
4759
if (summaryPosition === GridSummaryPosition.bottom && !isExpanded) {
4860
let childRecord = record;
4961
let parent = record.parent;

0 commit comments

Comments
 (0)