feat(igxGrid): Add styling for the first cell of a pinned row ghost. Remove obsolete code and set upinned records in pipe.

Author: skrustev

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

@@ -396,6 +396,10 @@
         @extend %grid-cell--pinned--column-selected !optional;
     }
 
+    @include e(td, $m: row-pinned-first) {
+        @extend %grid-cell--row-pinned-first !optional;
+    }
+
     @include e(td, $m: pinned-chip) {
         @extend %grid-cell--pinned-chip !optional;
     }

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

@@ -1417,6 +1417,10 @@
         }
     }
 
+    %grid-cell--row-pinned-first {
+        overflow: hidden;
+    }
+
     %grid-cell--pinned-chip {
         margin-#{$right}: rem(12px);
     }

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -546,6 +546,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     /**
      * @hidden
      */
+    @HostBinding('class.igx-grid__td--row-pinned-first')
     public get displayPinnedChip() {
         return this.row.pinned && this.row.disabled && this.visibleColumnIndex === 0;
     }

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

@@ -2441,6 +2441,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public columnWidthSetByUser = false;
 
+    /**
+     * @hidden @internal
+     */
+    public unpinnedRecords: any[];
+
     data: any[];
     filteredData: any[];
 
@@ -5156,7 +5161,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      */
     get dataView(): any[] {
-        return this.verticalScrollContainer.igxForOf.map(rec => this.isGhostRecord(rec) ? rec.recordRef : rec) ;
+        return this.unpinnedRecords ? this.unpinnedRecords : this.verticalScrollContainer.igxForOf;
     }
 
     /**
@@ -5410,7 +5415,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * If `headers` is enabled, it will use the column header (if any) instead of the column field.
      */
     public getSelectedData(formatters = false, headers = false) {
-        const source = this.isRowPinningToTop ? [...this.pinnedDataView, ...this.dataView] : [...this.dataView, ...this.pinnedDataView];
+        const source = this.filteredSortedData;
         return this.extractDataFromSelection(source, formatters, headers);
     }
 

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

@@ -115,7 +115,7 @@
         <ng-container *ngIf='data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
-        | rowPinning:id:true:pipeTrigger
+        | gridRowPinning:id:true:pipeTrigger
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
         | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
             <div #pinContainer *ngIf='pinnedData.length > 0' 
@@ -140,8 +140,7 @@
         | gridPaging:page:perPage:id:pipeTrigger
         | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger
         | gridDetails:hasDetails:expansionStates:pipeTrigger
-        | rowPinning:id:false:pipeTrigger
-        "
+        | gridRowPinning:id:false:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

@@ -156,7 +156,7 @@ export class IgxGridFilteringPipe implements PipeTransform {
  * @hidden
  */
 @Pipe({
-    name: 'rowPinning',
+    name: 'gridRowPinning',
     pure: true
 })
 export class IgxGridRowPinningPipe implements PipeTransform {
@@ -176,6 +176,7 @@ export class IgxGridRowPinningPipe implements PipeTransform {
             return result;
         }
 
+        grid.unpinnedRecords = collection;
         return collection.map((rec) => {
             return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;
         });

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

@@ -97,7 +97,7 @@
             <ng-container *ngIf="data
             | gridTransaction:id:pipeTrigger
             | visibleColumns:hasVisibleColumns
-            | gridHierarchicalRowPinning:true:pipeTrigger
+            | gridRowPinning:id:true:pipeTrigger
             | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
             | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger as pinnedData">
                 <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'
@@ -119,7 +119,7 @@
         | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridHierarchicalPaging:page:perPage:id:pipeTrigger
         | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger
-        | gridHierarchicalRowPinning:false:pipeTrigger"
+        | gridRowPinning:id:false:pipeTrigger"
             [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" [igxForTrackBy]='trackChanges'
             #verticalScrollContainer (onChunkPreload)="dataLoading($event)">

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { IgxGridModule } from '../grid/grid.module';
 import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
 import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
-import { IgxGridHierarchicalPipe, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalRowPinning } from './hierarchical-grid.pipes';
+import { IgxGridHierarchicalPipe, IgxGridHierarchicalPagingPipe } from './hierarchical-grid.pipes';
 import { IgxRowIslandComponent } from './row-island.component';
 import { IgxChildGridRowComponent } from './child-grid-row.component';
 import { IgxHierarchicalGridCellComponent } from './hierarchical-cell.component';
@@ -21,8 +21,7 @@ import { IgxHierarchicalGridBaseDirective } from './hierarchical-grid-base.direc
     IgxChildGridRowComponent,
     IgxHierarchicalGridCellComponent,
     IgxGridHierarchicalPipe,
-    IgxGridHierarchicalPagingPipe,
-    IgxGridHierarchicalRowPinning
+    IgxGridHierarchicalPagingPipe
   ],
   exports: [
     IgxGridModule,

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts

@@ -77,34 +77,3 @@ export class IgxGridHierarchicalPagingPipe implements PipeTransform {
         return result;
     }
 }
-
-/**
- * @hidden
- */
-@Pipe({
-    name: 'gridHierarchicalRowPinning',
-    pure: true
-})
-export class IgxGridHierarchicalRowPinning implements PipeTransform {
-
-    constructor(private gridAPI: GridBaseAPIService<IgxHierarchicalGridComponent>) { }
-
-    public transform(collection: any[], isPinned: boolean, pipeTrigger: number): any[] {
-        const grid = this.gridAPI.grid;
-
-        if (!grid.hasPinnedRecords) {
-            return isPinned ? [] : collection;
-        }
-
-        if (grid.hasPinnedRecords && isPinned) {
-            return collection.filter(rec => grid.isRecordPinned(rec));
-        }
-
-        if (grid.childLayoutKeys.length) {
-            return collection.map((rec) => {
-                return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;
-            });
-        }
-        return collection.filter(rec => !grid.isRecordPinned(rec));
-    }
-}