chore(*): Fix bugs with pinning+adding.

Author: MKirova

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

@@ -4087,6 +4087,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         };
         this._pipeTrigger++;
         this.cdr.detectChanges();
+        if (isInPinnedArea) {
+            this.calculateGridHeight();
+        }
         const row = this.getRowByIndex(index + 1);
         const cell = row.cells.find(c => c.editable);
         if (cell) {
@@ -6568,8 +6571,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (commit) {
             this.onRowAdded.pipe(first()).subscribe((args: IRowDataEventArgs) => {
                 const rowData = args.data;
+                const pinnedIndex = this.pinnedRecords.findIndex(x => x[this.primaryKey] === rowData[this.primaryKey]);
                 // A check whether the row is in the current view
-                const viewIndex = this.findRecordIndexInView(rowData);
+                const viewIndex = pinnedIndex !== -1 ? pinnedIndex : this.findRecordIndexInView(rowData);
                 const dataIndex = this.filteredSortedData.findIndex(data => data[this.primaryKey] === rowData[this.primaryKey]);
                 const isInView = viewIndex !== -1 && !this.navigation.shouldPerformVerticalScroll(viewIndex, 0);
                 const showIndex = isInView ? -1 : dataIndex;

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

@@ -50,7 +50,12 @@ export class IgxTreeGridRowComponent extends IgxRowDirective<IgxTreeGridComponen
      * @hidden
      */
     public get isRoot(): boolean {
-        return this.treeRow.level === 0;
+        let treeRec = this.treeRow;
+        const isPinnedArea = this.pinned && !this.disabled;
+        if (isPinnedArea) {
+            treeRec = this.grid.unpinnedRecords.find(x => x.data === this.rowData);
+        }
+        return treeRec.level === 0;
     }
 
     /**

src/app/tree-grid-add-row/tree-grid-add-row.sample.html

@@ -1,5 +1,5 @@
 <div>
-    <igx-tree-grid #grid [allowFiltering]='true' [data]="data" primaryKey="employeeID" foreignKey="PID"
+    <igx-tree-grid [pinning]="pinningConfig" #grid [allowFiltering]='true' [data]="data" primaryKey="employeeID" foreignKey="PID"
     [paging]="false" [width]="'900px'" [height]="'800px'" [rowEditable]="true"
     (mouseleave)="onMouseLeave(actionstrip)"
     (mouseover)="onMouseOver($event, grid, actionstrip)">

src/app/tree-grid-add-row/tree-grid-add-row.sample.ts

@@ -1,6 +1,6 @@
 import { IgxTreeGridComponent } from './../../../projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component';
 import { Component, ViewChild, OnInit } from '@angular/core';
-import { IgxActionStripComponent, IgxGridComponent, DisplayDensity } from 'igniteui-angular';
+import { IgxActionStripComponent, IgxGridComponent, DisplayDensity, ColumnPinningPosition, RowPinningPosition } from 'igniteui-angular';
 
 @Component({
     selector: 'app-tree-grid-add-row',
@@ -13,6 +13,7 @@ export class TreeGridAddRowSampleComponent implements OnInit {
 
     data: any[];
     columns: any[];
+    pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
 
     onMouseOver(event, grid, actionStrip) {
         if (event.target.nodeName.toLowerCase() === 'igx-grid-cell') {