feat(grid): add summaryRowHeight property

ddaribo · ddaribo · commit 1f2e7478d654 · 2021-11-18T19:06:42.000+02:00
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
@@ -1262,36 +1262,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     public set filterCellTemplate(template: TemplateRef<any>) {
         this._filterCellTemplate = template;
     }
-    /**
-     * Returns a reference to the `customSummaryCellTemplate`.
-     * ```typescript
-     * let customSummaryCellTemplate = this.column.customSummaryCellTemplate;
-     * ```
-     *
-     * @memberof IgxColumnComponent
-     */
-     @notifyChanges()
-     @WatchColumnChanges()
-     @Input()
-     public get customSummaryCellTemplate(): TemplateRef<any> {
-         return this._customSummaryCellTemplate;
-     }
-    /**
-     * Sets the custom summary cell template.
-     * ```html
-     * <ng-template igxCustomSummaryCell  let-summaryResults>
-     *    {{ summaryResults[0].label }}
-     * </ng-template>
-     * ```
-     * ```typescript
-     *
-     * ```
-     *
-     * @memberof IgxColumnComponent
-     */
-     public set customSummaryCellTemplate(template: TemplateRef<any>) {
-         this._customSummaryCellTemplate = template;
-     }
+
     /**
      * Gets the cells of the column.
      * ```typescript
@@ -1622,10 +1593,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      * @hidden
      */
     protected _filterCellTemplate: TemplateRef<any>;
-    /**
-     * @hidden
-     */
-    protected _customSummaryCellTemplate: TemplateRef<any>;
     /**
      * @hidden
      */
@@ -1737,9 +1704,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
         if (this.filterCellTemplateDirective) {
             this._filterCellTemplate = this.filterCellTemplateDirective.template;
         }
-        if (this.customSummaryCellTemplateDirective) {
-            this._customSummaryCellTemplate = this.customSummaryCellTemplateDirective.template;
-        }
         if (!this._columnPipeArgs.format) {
             this._columnPipeArgs.format = this.dataType === GridColumnDataType.Time ?
                 DEFAULT_TIME_FORMAT : this.dataType === GridColumnDataType.DateTime ?
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -68,6 +68,7 @@ export interface GridType extends IGridDataBindable {
     dataView: any[];
     transactions: TransactionService<Transaction, State>;
     defaultSummaryHeight: number;
+    summaryRowHeight: number;
 
     rowEditTabs: any;
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -228,6 +228,25 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Input()
     public loadingGridTemplate: TemplateRef<any>;
 
+    /**
+     * Sets summaryRow height
+     */
+    @Input()
+    public set summaryRowHeight(value: number) {
+        this._summaryRowHeight = value;
+        this.summaryService.summaryHeight = value;
+        // if (value === 0) {
+        //this.summaryService.calcMaxSummaryHeight();
+        // }
+        if (!this._init) {
+            this.reflow();
+        }
+    }
+
+    public get summaryRowHeight(): number {
+        return this._summaryRowHeight || this.summaryService.summaryHeight;
+    }
+
     /**
      * Controls the copy behavior of the grid.
      */
@@ -2592,10 +2611,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     public tfootHeight: number;
-    /**
-     * @hidden @internal
-     */
-    public summariesHeight: number;
 
     /**
      * @hidden @internal
@@ -2850,6 +2865,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _summaryPosition: GridSummaryPosition = GridSummaryPosition.bottom;
     private _summaryCalculationMode: GridSummaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;
     private _showSummaryOnCollapse = false;
+    private _summaryRowHeight = 0;
     private _cellSelectionMode: GridSelectionMode = GridSelectionMode.multiple;
     private _rowSelectionMode: GridSelectionMode = GridSelectionMode.none;
     private _selectRowOnClick = true;
@@ -3320,7 +3336,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         this.onDensityChanged.pipe(destructor).subscribe(() => {
             this.crudService.endEdit(false);
+            if (this._summaryRowHeight === 0) {
             this.summaryService.summaryHeight = 0;
+            }
             this.notifyChanges(true);
         });
     }
@@ -6412,10 +6430,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected calculateGridHeight() {
         this.calcGridHeadRow();
-        this.summariesHeight = 0;
-        if (this.hasSummarizedColumns && this.rootSummariesEnabled) {
-            this.summariesHeight = this.summaryService.calcMaxSummaryHeight();
-        }
 
         this.calcHeight = this._calculateGridBodyHeight();
         if (this.pinnedRowHeight && this.calcHeight) {
@@ -6440,7 +6454,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      */
     protected getFooterHeight(): number {
-        return this.summariesHeight || this.getComputedHeight(this.tfoot.nativeElement);
+        return this.summaryRowHeight || this.getComputedHeight(this.tfoot.nativeElement);
     }
     /**
      * @hidden
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -157,14 +157,14 @@
 </div>
 
 
-<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
+<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summaryRowHeight' #tfoot>
     <div tabindex="0" (focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" [attr.aria-activedescendant]="activeDescendant">
-        <igx-grid-summary-row [style.width.px]='calcWidth'  [style.height.px]='summariesHeight'
+        <igx-grid-summary-row [style.width.px]='calcWidth'  [style.height.px]='summaryRowHeight'
             *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
             [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
             class="igx-grid__summaries" #summaryRow>
         </igx-grid-summary-row>
-        <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
+        <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'
             [style.width.px]="scrollSize"></div>
     </div>
 </div>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -118,15 +118,15 @@
     <div igxOverlayOutlet #igxBodyOverlayOutlet="overlay-outlet"></div>
 </div>
 
-<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
+<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summaryRowHeight' #tfoot>
     <div tabindex="0" (focus)="navigation.focusFirstCell(false)" [attr.aria-activedescendant]="activeDescendant"
      (keydown)="navigation.summaryNav($event)">
-        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
+        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'
             *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
             [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
             class="igx-grid__summaries" #summaryRow>
         </igx-grid-summary-row>
-        <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
+        <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'
             [style.width.px]="scrollSize"></div>
     </div>
 </div>
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.service.ts b/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.service.ts
@@ -130,7 +130,9 @@ export class IgxGridSummaryService {
     }
 
     public resetSummaryHeight() {
-        this.summaryHeight = 0;
+        if (this.summaryHeight !== this.grid.summaryRowHeight) {
+            this.summaryHeight = 0;
+        }
         this.grid.summaryPipeTrigger++;
         if (this.grid.rootSummariesEnabled) {
             this.retriggerRootPipe++;
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html
@@ -1,8 +1,11 @@
 <ng-container *ngIf="hasSummary">
-    <ng-container
-        *ngTemplateOutlet="column.customSummaryCellTemplate ? column.customSummaryCellTemplate : defaultSummary; context: { $implicit: summaryResults, summaryResults: summaryResults}">
+    <ng-container *ngTemplateOutlet="column.customSummaryCellTemplateDirective ? customSummary : defaultSummary">
     </ng-container>
-
+</ng-container>
+<ng-template #customSummary>
+    <ng-container *ngTemplateOutlet="column.customSummaryCellTemplateDirective.template; context: { $implicit: summaryResults }">
+    </ng-container>
+</ng-template>
     <ng-template #defaultSummary>
         <ng-container *ngFor="let summary of summaryResults" >
             <div class="igx-grid-summary__item" [style.height.px]="itemHeight">
@@ -36,4 +39,3 @@
             </div>
         </ng-container>
     </ng-template>
-</ng-container>
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
@@ -111,15 +111,15 @@
     <div igxOverlayOutlet #igxBodyOverlayOutlet="overlay-outlet"></div>
 </div>
 
-<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
+<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summaryRowHeight' #tfoot>
     <div tabindex="0" (focus)="navigation.focusFirstCell(false)"
     (keydown)="navigation.summaryNav($event)" [attr.aria-activedescendant]="activeDescendant">
-        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
+        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'
             *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
             [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
             class="igx-grid__summaries" #summaryRow>
         </igx-grid-summary-row>
-        <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
+        <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'
             [style.width.px]="scrollSize"></div>
     </div>
 </div>
diff --git a/src/app/grid-summaries/grid-summaries.sample.html b/src/app/grid-summaries/grid-summaries.sample.html
@@ -1,5 +1,9 @@
+<div class="density-chooser">
+    <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
+</div>
 <igx-grid #grid1 [pinning]="pinningConfig" [data]="data" [autoGenerate]="false" [displayDensity]="'compact'" [width]="w" [height]="h"
-    [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [summaryCalculationMode]="'rootAndChildLevels'">
+    [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [summaryCalculationMode]="'rootAndChildLevels'" [showSummaryOnCollapse]="true"
+    [summaryRowHeight]="rh" [rowSelection]="rowSelection ? 'multiple' : 'none'" [displayDensity]="density">
     <igx-grid-toolbar *ngIf="showToolbar" [displayDensity]="grid1.displayDensity">
         <igx-grid-toolbar-title>Grid Toolbar</igx-grid-toolbar-title>
         <igx-grid-toolbar-actions>
@@ -31,9 +35,14 @@
             ${{val}}
         </ng-template>
         <ng-template igxCustomSummaryCell let-summaryResults>
-        <span>Custom summary cell:</span>
-           <span>Number of Summaries: {{ summaryResults.length }}</span>
-           <span>FirstSummary - {{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</span>
+            <div style="font-size: 0.75rem">       
+                <span>Custom summary cell:</span><br>      
+                <span>Number of Summaries: {{ summaryResults.length }}</span><br>      
+                <span>First Summary - {{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</span><br>     
+                <span>Second Summary - {{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}</span><br>     
+                <span>Third Summary - {{ summaryResults[2].label }}: {{ summaryResults[2].summaryResult }}</span><br>     
+                <span> Fourth Summary - {{ summaryResults[3].label }}: {{ summaryResults[3].summaryResult }}</span><br>     
+            </div>
         </ng-template>
     </igx-column>
     <igx-column field="OrderDate" [width]="cw" [dataType]="'date'" [hasSummary]="false" [sortable]="true">
@@ -60,6 +69,10 @@
     <label> Columns Width </label>
     <input [(ngModel)]="cw">
 </div>
+<div class="properties-input">
+    <label> Summary Row Height </label>
+    <input type="number" [(ngModel)]="rh">
+</div>
 
 <igx-switch [(ngModel)]="grid1.paging">Enable Paging</igx-switch>
 <igx-switch [(ngModel)]="grid1.allowFiltering">allowFiltering</igx-switch>
@@ -73,6 +86,7 @@
 <igx-switch [(ngModel)]="disablePinning">ReorderLevel disablePinning</igx-switch>
 <igx-switch [(ngModel)]="hasSummaryUnit">hasSummaryUnit</igx-switch>
 <igx-switch [(ngModel)]="hasHidden">hasHidden</igx-switch>
+<igx-switch [(ngModel)]="rowSelection">Row Selection</igx-switch>
 
 <button (click)="enableSummary()"> Enable Summary for column ReorderLevel</button>
 <button (click)="disableSummary()">Disable Summary</button>
diff --git a/src/app/grid-summaries/grid-summaries.sample.ts b/src/app/grid-summaries/grid-summaries.sample.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import {
     IgxGridComponent,
     IgxNumberSummaryOperand,
@@ -30,7 +30,7 @@ class MySummary extends IgxNumberSummaryOperand {
     styleUrls: ['./grid-summaries.component.scss'],
     templateUrl: 'grid-summaries.sample.html'
 })
-export class GridSummaryComponent {
+export class GridSummaryComponent implements OnInit {
 
     @ViewChild('grid1', { read: IgxGridComponent, static: true })
     private grid1: IgxGridComponent;
@@ -40,6 +40,7 @@ export class GridSummaryComponent {
     public w = '1200px';
     public h = '500px';
     public cw = '200px';
+    public rh = 0;
 
     public groupable = false;
     public filterable = true;
@@ -50,7 +51,9 @@ export class GridSummaryComponent {
     public columnHiding = false;
     public columnPinning = false;
     public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
-
+    public rowSelection = false;
+    public density = 'compact';
+    public displayDensities;
 
     public data = [{
         __metadata: {
@@ -707,6 +710,16 @@ export class GridSummaryComponent {
             this.data[i]['Index'] = i;
         }
     }
+    public ngOnInit(): void {
+        this.displayDensities = [
+            { label: 'compact', selected: this.density === 'compact', togglable: true },
+            { label: 'cosy', selected: this.density === 'cosy', togglable: true },
+            { label: 'comfortable', selected: this.density === 'comfortable', togglable: true }];
+        }
+
+    public selectDensity(event) {
+         this.density = this.displayDensities[event.index].label;
+    }
 
     public updateData() {
         const d = [].concat(this.data).concat(this.data2);
