Merge pull request #7498 from IgniteUI/mkirova/fix-6065

fix(igxGrid): Include custom footer, which is rendered next to pager,…

Author: ChronosSF

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

@@ -4656,9 +4656,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    protected getPagingHeight(): number {
+    protected getPagingFooterHeight(): number {
         let pagingHeight = 0;
-        if (this.paging && this.footer) {
+        if (this.footer) {
             pagingHeight = this.footer.nativeElement.firstElementChild ?
                 this.footer.nativeElement.offsetHeight : 0;
         }
@@ -4689,7 +4689,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             this.theadRow.nativeElement.offsetHeight;
         const footerHeight = this.summariesHeight || this.tfoot.nativeElement.offsetHeight - this.tfoot.nativeElement.clientHeight;
         const toolbarHeight = this.getToolbarHeight();
-        const pagingHeight = this.getPagingHeight();
+        const pagingHeight = this.getPagingFooterHeight();
         const groupAreaHeight = this.getGroupAreaHeight();
         const renderedHeight = toolbarHeight + actualTheadRow +
             footerHeight + pagingHeight + groupAreaHeight +

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

@@ -1742,6 +1742,10 @@ describe('IgxGrid Component Tests #grid', () => {
             const footerContent = footer.textContent.trim();
 
             expect(footerContent).toEqual('Custom content');
+            const grid = fix.componentInstance.grid;
+
+            const expectedHeight = parseInt(grid.height, 10) - grid.theadRow.nativeElement.offsetHeight - grid.scrollSize - 100;
+            expect(expectedHeight - grid.calcHeight).toBeLessThanOrEqual(1);
         });
     });
 
@@ -2129,15 +2133,19 @@ export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderi
 @Component({
     template:
         `<div>
-        <igx-grid #grid [data]="data" [displayDensity]="'compact'" [autoGenerate]="true"
-            [paging]="true" [perPage]="5">
+        <igx-grid #grid [data]="data" height='300px' [displayDensity]="'compact'" [autoGenerate]="true"
+            >
             <igx-grid-footer>
-            Custom content
+                <div style='height:100px;'>
+                Custom content
+                </div>
             </igx-grid-footer>
         </igx-grid>
         </div>`
 })
 export class IgxGridWithCustomFooterComponent extends IgxGridTestComponent {
+    public data = SampleTestData.foodProductData();
+    @ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent;
 }
 @Component({
     template:

src/app/grid-column-moving/grid-column-moving.sample.html

@@ -36,6 +36,11 @@
                                                     [hasSummary]="false"
                                                     [dataType]="c.type">
                 </igx-column>
+                <igx-grid-footer>
+                    <div style='height:200px;'>
+                        Test
+                    </div>
+                </igx-grid-footer>
             </igx-grid>
             Drag mode: {{ grid1.selectionService.dragMode }}
             <div class="sample-buttons">