Merge branch 'master' into add-calendar-events-master

Author: zdrawku

CHANGELOG.md

@@ -19,11 +19,8 @@ All notable changes for each version of this project will be documented in this
     - 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.
 
 ### New Features
-- `IgxCalendar` and `IgxMonthPicker`
-    - `onViewDateChanged` emitted after the month/year presented in the view is changed after user interaction.
-    - `onActiveViewChanged` event emitted after the active view (DEFAULT, YEAR, DECADE) is changed after user interaction.
-    - `viewDate` day value is always 1.
-    - `activeView` setter is now available as an input property.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Introduced `showSummaryOnCollapse` grid property which allows you to control whether the summary row stays visible when the groupBy / parent row is collapsed.
 - `IgxGridState` directive
     - Added support for expansion states, column selection and row pinning.
     - Added support for `IgxTreeGrid` and `IgxHierarchicalGrid` (including child grids)
@@ -37,6 +34,11 @@ All notable changes for each version of this project will be documented in this
     - An optional string parameter `message` has been added to `show()` method.
 - `IgxNavbar`
     - Added new `igx-navbar-title, igxNavbarTitle` directive that can be used to provide custom content for navbar title. It would override the value of `title` input property.
+- `IgxCalendar` and `IgxMonthPicker`
+    - `onViewDateChanged` emitted after the month/year presented in the view is changed after user interaction.
+    - `onActiveViewChanged` event emitted after the active view (DEFAULT, YEAR, DECADE) is changed after user interaction.
+    - `viewDate` day value is always 1.
+    - `activeView` setter is now available as an input property.
 
 ## 10.0.0
 

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

@@ -1026,6 +1026,26 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * Controls whether the summary row is visible when groupBy/parent row is collapsed.
+     * @example
+     * ```html
+     * <igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid>
+     * ```
+     * @remarks
+     * By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible
+     * when the groupBy/parent row is collapsed.
+     */
+    @Input()
+    get showSummaryOnCollapse() {
+        return this._showSummaryOnCollapse;
+    }
+
+    set showSummaryOnCollapse(value: boolean) {
+        this._showSummaryOnCollapse = value;
+        this.notifyChanges();
+    }
+
     /**
      * Gets/Sets the filtering strategy of the grid.
      * @example
@@ -2625,6 +2645,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
 
     private _summaryPosition = GridSummaryPosition.bottom;
     private _summaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;
+    private _showSummaryOnCollapse = false;
     private _cellSelectionMode = GridSelectionMode.multiple;
     private _rowSelectionMode = GridSelectionMode.none;
     private _columnSelectionMode = GridSelectionMode.none;

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

@@ -1759,6 +1759,112 @@ describe('IgxGrid - Summaries #grid', () => {
             expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(5);
         });
 
+        it('should show summaries when group row is collapsed', () => {
+            expect(grid.showSummaryOnCollapse).toBe(false);
+            expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(3);
+            const groupRows = grid.groupsRowList.toArray();
+            grid.showSummaryOnCollapse = true;
+            fix.detectChanges();
+
+            groupRows[0].toggle();
+            fix.detectChanges();
+
+            expect(groupRows[0].expanded).toBe(false);
+            expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(4);
+            let summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 1);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
+
+            groupRows[0].toggle();
+            fix.detectChanges();
+
+            expect(groupRows[0].expanded).toBe(true);
+            expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(3);
+            summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 3);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
+        });
+
+        it('should be able to change showSummaryOnCollapse run time', () => {
+            expect(grid.showSummaryOnCollapse).toBe(false);
+            expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(3);
+            const groupRows = grid.groupsRowList.toArray();
+            fix.detectChanges();
+
+            groupRows[0].toggle();
+            fix.detectChanges();
+
+            expect(groupRows[0].expanded).toBe(false);
+            expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(3);
+
+            grid.showSummaryOnCollapse = true;
+            fix.detectChanges();
+
+            expect(grid.showSummaryOnCollapse).toBe(true);
+            expect(GridSummaryFunctions.getAllVisibleSummariesLength(fix)).toEqual(4);
+            const summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 1);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
+        });
+
+
+        it('should correctly position summary row when group row is collapsed', () => {
+            grid.showSummaryOnCollapse = true;
+            fix.detectChanges();
+            grid.groupBy({ fieldName: 'OnPTO', dir: SortingDirection.Asc, ignoreCase: false });
+            fix.detectChanges();
+
+            let summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 4);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
+
+            summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 5);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
+
+            const groupRows = grid.groupsRowList.toArray();
+            groupRows[1].toggle();
+            fix.detectChanges();
+
+            summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 2);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
+
+            summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 3);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
+
+            grid.summaryPosition = 'top';
+            fix.detectChanges();
+
+            summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 1);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
+
+            summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 3);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['2', '17', '17', '34', '17']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Dec 18, 2007', 'Mar 19, 2016']);
+
+        });
+
         it('should be able to enable/disable summaries at runtime', () => {
             grid.getColumnByName('Age').hasSummary = false;
             grid.getColumnByName('ParentID').hasSummary = false;

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

@@ -138,7 +138,7 @@
         | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
         | gridPaging:page:perPage:id:pipeTrigger
-        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger
+        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
         | gridDetails:hasDetails:expansionStates:pipeTrigger
         | gridRowPinning:id:false:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'

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

@@ -30,16 +30,16 @@ export class IgxGridSummaryPipe implements PipeTransform {
         hasSummary: boolean,
         summaryCalculationMode: GridSummaryCalculationMode,
         summaryPosition: GridSummaryPosition,
-        id: string, pipeTrigger: number, summaryPipeTrigger: number): any[] {
+        id: string, showSummary, pipeTrigger: number, summaryPipeTrigger: number): any[] {
 
         if (!collection.data || !hasSummary || summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly) {
             return collection.data;
         }
 
-        return this.addSummaryRows(id, collection, summaryPosition);
+        return this.addSummaryRows(id, collection, summaryPosition, showSummary);
     }
 
-    private addSummaryRows(gridId: string, collection: IGroupByResult, summaryPosition: GridSummaryPosition): any[] {
+    private addSummaryRows(gridId: string, collection: IGroupByResult, summaryPosition: GridSummaryPosition, showSummary): any[] {
         const recordsWithSummary = [];
         const lastChildMap = new Map<any, IGroupByRecord[]>();
         const grid: IgxGridComponent = this.gridAPI.grid;
@@ -73,6 +73,15 @@ export class IgxGridSummaryPipe implements PipeTransform {
                 recordsWithSummary.push(record);
             }
 
+            if (summaryPosition === GridSummaryPosition.bottom && showSummary && (groupByRecord && !grid.isExpandedGroup(groupByRecord))) {
+                const records = this.removeDeletedRecord(grid, groupByRecord.records.slice());
+                const summaries = grid.summaryService.calculateSummaries(recordId, records);
+                const summaryRecord: ISummaryRecord = {
+                    summaries: summaries,
+                    max: maxSummaryHeight
+                };
+                recordsWithSummary.push(summaryRecord);
+            }
             if (summaryPosition === GridSummaryPosition.bottom && lastChildMap.has(recordId)) {
                 const groupRecords = lastChildMap.get(recordId);
 
@@ -89,7 +98,8 @@ export class IgxGridSummaryPipe implements PipeTransform {
                 }
             }
 
-            if (groupByRecord === null || !grid.isExpandedGroup(groupByRecord)) {
+            const showSummaries = showSummary ? false : (groupByRecord && !grid.isExpandedGroup(groupByRecord));
+            if (groupByRecord === null || showSummaries) {
                 continue;
             }
 
@@ -123,7 +133,6 @@ export class IgxGridSummaryPipe implements PipeTransform {
                 groupRecords.unshift(groupByRecord);
             }
         }
-
         return recordsWithSummary;
     }
 

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

@@ -163,6 +163,99 @@ describe('IgxTreeGrid - Summaries #tGrid', () => {
             expect(GridSummaryFunctions.getAllVisibleSummariesRowIndexes(fix)).toEqual([6, 7, rootSummaryIndex]);
         });
 
+        it('should be able to show/hide summaries for collapsed parent rows runtime', () => {
+            treeGrid.summaryCalculationMode = 'childLevelsOnly';
+            fix.detectChanges();
+
+            let summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
+            expect(summaries.length).toBe(0);
+
+            treeGrid.showSummaryOnCollapse = true;
+            fix.detectChanges();
+
+            summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
+            expect(summaries.length).toBe(4);
+
+            treeGrid.showSummaryOnCollapse = false;
+            fix.detectChanges();
+
+            summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
+            expect(summaries.length).toBe(0);
+        });
+
+        it('should position correctly summary row for collapsed rows -- bottom position', () => {
+            treeGrid.expandAll();
+            fix.detectChanges();
+
+            treeGrid.summaryCalculationMode = 'childLevelsOnly';
+            fix.detectChanges();
+
+            let summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
+            expect(summaries.length).toBe(4);
+
+            treeGrid.showSummaryOnCollapse = true;
+            fix.detectChanges();
+
+            treeGrid.toggleRow(treeGrid.getRowByIndex(3).rowID);
+            fix.detectChanges();
+
+            summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
+            expect(summaries.length).toBe(4);
+
+            let summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 4);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Nov 11, 2009', 'Oct 17, 2015']);
+
+            summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 5);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
+                ['Count', 'Earliest', 'Latest'], ['3', 'Jul 19, 2009', 'Sep 18, 2014']);
+
+            treeGrid.summaryPosition = 'top';
+            fix.detectChanges();
+
+            summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
+            expect(summaries.length).toBe(4);
+
+            summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 1);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
+                ['Count', 'Earliest', 'Latest'], ['3', 'Jul 19, 2009', 'Sep 18, 2014']);
+
+            summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 5);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Nov 11, 2009', 'Oct 17, 2015']);
+        });
+
+        it('should position correctly summary row for collapsed rows -- top position', () => {
+            treeGrid.expandAll();
+            fix.detectChanges();
+
+            treeGrid.summaryCalculationMode = 'childLevelsOnly';
+            fix.detectChanges();
+
+            treeGrid.showSummaryOnCollapse = true;
+            fix.detectChanges();
+
+            let summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
+            expect(summaries.length).toBe(4);
+
+            treeGrid.toggleRow(treeGrid.getRowByIndex(3).rowID);
+            fix.detectChanges();
+
+            treeGrid.summaryPosition = 'top';
+            fix.detectChanges();
+
+            summaries = GridSummaryFunctions.getAllVisibleSummaries(fix);
+            expect(summaries.length).toBe(4);
+
+            let summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 1);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
+                ['Count', 'Earliest', 'Latest'], ['3', 'Jul 19, 2009', 'Sep 18, 2014']);
+
+            summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 5);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2,
+                ['Count', 'Earliest', 'Latest'], ['2', 'Nov 11, 2009', 'Oct 17, 2015']);
+        });
+
         it('should be able to enable/disable summaries at runtime', () => {
             treeGrid.expandAll();
             fix.detectChanges();

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>