chore(*): Merge from master.

Author: MKirova

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -86,6 +86,9 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
     }
 
     public get_row_by_key(rowSelector: any): IgxRowDirective<IgxGridBaseDirective & GridType> {
+        if (!this.grid) {
+            return null;
+        }
         const primaryKey = this.grid.primaryKey;
         if (primaryKey !== undefined && primaryKey !== null) {
             return this.grid.dataRowList.find((row) => row.rowData[primaryKey] === rowSelector);

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

@@ -1747,8 +1747,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    @ViewChild('pinContainer', { static: false })
-    public pinContainer: ElementRef;
+    @ViewChildren('pinContainer', { read: ElementRef })
+    public pinContainers: QueryList<ElementRef>;
 
     /**
      * @hidden @internal
@@ -2410,6 +2410,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected destroy$ = new Subject<any>();
 
+    protected _filteredPinnedData;
+    protected _filteredUnpinnedData;
+
     /**
      * @hidden
      */
@@ -2824,6 +2827,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             this.endEdit(true);
             this.cdr.markForCheck();
         });
+
+        this.onRowPinning.subscribe(() => {
+            this.summaryService.clearSummaryCache();
+        });
     }
 
     /**
@@ -2873,6 +2880,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
+    public setFilterData(data, pinned: boolean) {
+        if (this.hasPinnedRecords && pinned) {
+            this._filteredPinnedData = data;
+            this.filteredData = [... this._filteredPinnedData, ... this._filteredUnpinnedData];
+        } else if (this.hasPinnedRecords && !pinned) {
+            this._filteredUnpinnedData = data;
+        } else {
+            this.filteredData = data;
+        }
+    }
+
     /**
      * @hidden
      * @internal
@@ -2964,6 +2982,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         vertScrDC.addEventListener('scroll', this.scrollHandler);
         vertScrDC.addEventListener('wheel', () => this.wheelHandler());
 
+        this.pinContainers.changes.subscribe((c) => {
+            if (this.hasPinnedRecords) {
+                // on row pin containers change grid sizes should be recalculated.
+                this.calculateGridSizes();
+            }
+        });
     }
 
     /**
@@ -3088,6 +3112,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     public set expansionStates(value) {
         this._expansionStates = new Map<any, boolean>(value);
         this.expansionStatesChange.emit(this._expansionStates);
+        this.notifyChanges(true);
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
         }
@@ -4147,8 +4172,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     get pinnedRowHeight() {
-        const containerHeight = this.pinContainer ? this.pinContainer.nativeElement.offsetHeight : 0;
-        return this._pinnedRecordIDs.length > 0 ? containerHeight : 0;
+        const pinContainer = this.pinContainers && this.pinContainers.length > 0 ? this.pinContainers.first : null;
+        const containerHeight = pinContainer ? pinContainer.nativeElement.offsetHeight : 0;
+        return this.hasPinnedRecords ? containerHeight : 0;
     }
 
     get totalHeight() {

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

@@ -108,22 +108,29 @@
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0"
             [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 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 *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
+    </ng-container>
+    <ng-template #pinnedRecordsTemplate>
+        <ng-container *ngIf='data
+        | gridTransaction:id:pipeTrigger
+        | visibleColumns:hasVisibleColumns
+        | rowPinning:id:true:pipeTrigger
+        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
+        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
+        | gridDetails:hasDetails:expansionStates:pipeTrigger as pinnedData'>
+            <div #pinContainer *ngIf='pinnedData.length > 0' 
+                [ngClass]="{
+                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,
+                    'igx-grid__tr--pinned-top': isRowPinningToTop
+                }"
+                class='igx-grid__tr--pinned' [style.bottom.px]=' !isRowPinningToTop ? pinnedBottom : null'>
+                <ng-container *ngFor="let rowData of pinnedData; let rowIndex = index">
+                    <ng-container *ngTemplateOutlet="getRowTemplate(rowData); context: getContext(rowData, rowIndex, true)">
+                    </ng-container>
                 </ng-container>
-            </ng-container>
-        </ng-template>
-        <div #pinContainer *ngIf='hasPinnedRecords && isRowPinningToTop' class='igx-grid__tr--pinned igx-grid__tr--pinned-top'>
-            <ng-container *ngTemplateOutlet="pinnedRecordsTemplate">
-            </ng-container>  
-        </div>
+            </div>
+        </ng-container>
+    </ng-template>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
@@ -148,10 +155,8 @@
                 (onBeforeViewDetach)='viewDetachHandler($event)'>
             </ng-template>
         </ng-template>
-        <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>
+        <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
+        </ng-container>
         <ng-template #record_template let-rowIndex="index" let-rowData>
             <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row>
             </igx-grid-row>

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

@@ -135,7 +135,7 @@ export class IgxGridFilteringPipe implements PipeTransform {
 
     public transform(collection: any[], expressionsTree: IFilteringExpressionsTree,
         filterStrategy: IFilteringStrategy,
-        advancedExpressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number, filteringPipeTrigger: number) {
+        advancedExpressionsTree: IFilteringExpressionsTree, id: string, pipeTrigger: number, filteringPipeTrigger: number, pinned?) {
         const grid = this.gridAPI.grid;
         const state = {
             expressionsTree: expressionsTree,
@@ -148,7 +148,7 @@ export class IgxGridFilteringPipe implements PipeTransform {
         }
 
         const result = DataUtil.filter(cloneArray(collection), state);
-        grid.filteredData = result;
+        grid.setFilterData(result, pinned);
         return result;
     }
 }