Merge remote-tracking branch 'origin/master' into vmihalkov/groupby

Author: ChronosSF

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

@@ -2479,15 +2479,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected _columnPinning = false;
 
-
-    /**
-     * @hidden
-    */
-    public get pinnedRecords() {
-        return this._pinnedRecords;
-    }
-
-    protected _pinnedRecords = [];
+    protected _pinnedRecordIDs = [];
 
     /**
      * @hidden
@@ -2652,6 +2644,32 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         });
     }
 
+    /**
+    * @hidden
+    * @internal
+    */
+    public isRecordPinned(rec) {
+        const id = this.primaryKey ? rec[this.primaryKey] : rec;
+        return this._pinnedRecordIDs.indexOf(id) !== -1;
+    }
+
+    /**
+    * @hidden
+    * @internal
+    */
+    public pinRecordIndex(rec) {
+        const id = this.primaryKey ? rec[this.primaryKey] : rec;
+        return this._pinnedRecordIDs.indexOf(id);
+    }
+
+    /**
+    * @hidden
+    * @internal
+    */
+    public get hasPinnedRecords() {
+        return this._pinnedRecordIDs.length > 0;
+    }
+
     private keydownHandler = (event) => {
         const key = event.key.toLowerCase();
         if ((isNavigationKey(key) && event.keyCode !== 32) || key === 'tab' || key === 'pagedown' || key === 'pageup') {
@@ -4066,8 +4084,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param index The index at which to insert the row in the pinned collection.
      */
     public pinRow(rowID: any, index?: number): boolean {
-        const rec = this.gridAPI.get_rec_by_id(rowID);
-        if (!rec || this.pinnedRecords.indexOf(rec) !== -1 || this.data.indexOf(rec) === -1) {
+        if (this._pinnedRecordIDs.indexOf(rowID) !== -1) {
             return false;
         }
         const row = this.gridAPI.get_row_by_key(rowID);
@@ -4080,7 +4097,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         };
         this.onRowPinning.emit(eventArgs);
 
-        this.pinnedRecords.splice(eventArgs.insertAtIndex || this.pinnedRecords.length, 0, rec);
+        this.endEdit(true);
+
+        this._pinnedRecordIDs.splice(eventArgs.insertAtIndex || this._pinnedRecordIDs.length, 0, rowID);
         this._pipeTrigger++;
         if (this.gridAPI.grid) {
             this.notifyChanges(true);
@@ -4098,9 +4117,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @param rowID The row id - primaryKey value or the data record instance.
     */
     public unpinRow(rowID: any) {
-        const rec = this.gridAPI.get_rec_by_id(rowID);
-        const index =  this.pinnedRecords.indexOf(rec);
-        if (index === -1 || !rec) {
+        const index =  this._pinnedRecordIDs.indexOf(rowID);
+        if (index === -1) {
             return false;
         }
         const row = this.gridAPI.get_row_by_key(rowID);
@@ -4110,7 +4128,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             row: row
         };
         this.onRowPinning.emit(eventArgs);
-        this.pinnedRecords.splice(index, 1);
+        this.endEdit(true);
+        this._pinnedRecordIDs.splice(index, 1);
         this._pipeTrigger++;
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
@@ -4121,7 +4140,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
 
     get pinnedRowHeight() {
         const containerHeight = this.pinContainer ? this.pinContainer.nativeElement.offsetHeight : 0;
-        return this.pinnedRecords.length > 0 ? containerHeight : 0;
+        return this._pinnedRecordIDs.length > 0 ? containerHeight : 0;
     }
 
     get totalHeight() {

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

@@ -109,23 +109,25 @@
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
         <ng-template #pinnedRecordsTemplate>
-            <ng-container *ngFor="let rowData of pinnedRecords
+            <ng-container *ngFor="let rowData of data
+                | gridTransaction:id:pipeTrigger
                 | visibleColumns:hasVisibleColumns
+                | rowPinning:id:true:pipeTrigger
                 | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
                 | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
                 | gridDetails:hasDetails:expansionStates:pipeTrigger; let rowIndex = index">
                 <ng-container *ngTemplateOutlet="getRowTemplate(rowData); context: getContext(rowData, rowIndex, true)">
                 </ng-container>
             </ng-container>
         </ng-template>
-        <div #pinContainer *ngIf='pinnedRecords.length > 0 && isRowPinningToTop' class='igx-grid__tr--pinned igx-grid__tr--pinned-top'>
+        <div #pinContainer *ngIf='hasPinnedRecords && isRowPinningToTop' class='igx-grid__tr--pinned igx-grid__tr--pinned-top'>
             <ng-container *ngTemplateOutlet="pinnedRecordsTemplate">
             </ng-container>  
         </div>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
-        | rowPinning:id:pipeTrigger
+        | rowPinning:id:false:pipeTrigger
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
         | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
@@ -146,7 +148,7 @@
                 (onBeforeViewDetach)='viewDetachHandler($event)'>
             </ng-template>
         </ng-template>
-        <div #pinContainer *ngIf='pinnedRecords.length > 0 && !isRowPinningToTop' class='igx-grid__tr--pinned igx-grid__tr--pinned-bottom' [style.bottom.px]='pinnedBottom'>
+        <div #pinContainer *ngIf='hasPinnedRecords && !isRowPinningToTop' class='igx-grid__tr--pinned igx-grid__tr--pinned-bottom' [style.bottom.px]='pinnedBottom'>
             <ng-container *ngTemplateOutlet="pinnedRecordsTemplate">
             </ng-container>   
         </div>

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

@@ -830,7 +830,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         if (pinned && !this.isRowPinningToTop) {
             rowIndex = rowIndex + this.dataView.length;
         }
-        rowIndex = !pinned && this.isRowPinningToTop ? rowIndex + this.pinnedRecords.length : rowIndex;
+        rowIndex = !pinned && this.isRowPinningToTop ? rowIndex + this._pinnedRecordIDs.length : rowIndex;
         if (this.isDetailRecord(rowData)) {
             const cachedData = this.childDetailTemplates.get(rowData.detailsData);
             const rowID = this.primaryKey ? rowData.detailsData[this.primaryKey] : this.data.indexOf(rowData.detailsData);

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

@@ -164,16 +164,20 @@ export class IgxGridRowPinningPipe implements PipeTransform {
 
     constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) {}
 
-    public transform(collection: any[] , id: string, pipeTrigger: number) {
+    public transform(collection: any[] , id: string, isPinned = false, pipeTrigger: number) {
         const grid = this.gridAPI.grid;
-        const pinnedRows = grid.pinnedRecords;
-        if (pinnedRows.length === 0) {
-            return collection;
+
+        if (!grid.hasPinnedRecords) {
+            return isPinned ? [] : collection;
         }
 
         const result = collection.filter((value, index) => {
-            return pinnedRows.indexOf(value) === -1;
+            return  isPinned ? grid.isRecordPinned(value) : !grid.isRecordPinned(value);
         });
+        if (isPinned) {
+            // pinned records should be ordered as they were pinned.
+            result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
+        }
         return result;
     }
 }