Merge pull request #7431 from IgniteUI/mkirova/fix-7324

fix(igxGrid): Position pinned rows at bottom with absolute position.

Author: rkaraivanov

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1132,6 +1132,8 @@
 
     %igx-grid__tr--pinned-bottom {
         border-top: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important;
+        position: absolute;
+        bottom: 0;
     }
 
     %igx-grid__tr--edit {

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

@@ -4294,14 +4294,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.calcHeight ? this.calcHeight + this.pinnedRowHeight : this.calcHeight;
     }
 
-    get pinnedBottom() {
-        const start = this.verticalScrollContainer.state.startIndex;
-        const end = this.verticalScrollContainer.state.startIndex + this.verticalScrollContainer.state.chunkSize - 1;
-        const bottom = this.verticalScrollContainer.getScrollForIndex(end, true) - this.verticalScrollContainer.getScrollForIndex(start);
-        return bottom;
-    }
-
-
     /**
      * Recalculates grid width/height dimensions.
      * @remarks

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

@@ -123,7 +123,7 @@
                     'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,
                     'igx-grid__tr--pinned-top': isRowPinningToTop
                 }"
-                class='igx-grid__tr--pinned' [style.bottom.px]=' !isRowPinningToTop ? pinnedBottom : null'>
+                class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>
                 <ng-container *ngFor="let rowData of pinnedData; let rowIndex = index">
                     <ng-container *ngTemplateOutlet="pinned_record_template; context: getContext(rowData, rowIndex, true)">
                     </ng-container>

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

@@ -102,7 +102,7 @@
             | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData">
                 <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'
                     [ngClass]="{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }"
-                    [style.bottom.px]=' !isRowPinningToTop ? pinnedBottom : null'>
+                    [style.width.px]='calcWidth'>
                     <ng-container *ngFor="let rowData of pinnedData; let rowIndex = index">
                         <ng-container *ngTemplateOutlet="pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)">
                         </ng-container>

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

@@ -87,7 +87,7 @@
                         'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,
                         'igx-grid__tr--pinned-top': isRowPinningToTop
                     }"
-                    class='igx-grid__tr--pinned' [style.bottom.px]=' !isRowPinningToTop ? pinnedBottom : null'>
+                    class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>
                     <ng-container *ngFor="let rowData of pinnedData;let rowIndex = index;">
                         <ng-container *ngTemplateOutlet="pinned_record_template; context: getContext(rowData, rowIndex, true)">
                         </ng-container>