Merge pull request #6140 from IgniteUI/mkirova/fix-6132

fix(igxGrid): Workaround for ivy issue where ContentChildren are re-e…

Author: kdinev

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -571,6 +571,7 @@ export class IgxColumnComponent implements AfterContentInit {
             /* No grid/width available at initialization. `initPinning` in the grid
                will re-init the group (if present)
             */
+            this._unpinnedIndex = this.grid.columns.filter(x => !x.pinned).indexOf(this);
             this._pinned = value;
             this.pinnedChange.emit(this._pinned);
         }

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

@@ -3664,9 +3664,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    protected _reorderPinnedColumns(from: IgxColumnComponent, to: IgxColumnComponent, position: DropPosition) {
-        const pinned = this._pinnedColumns;
-        let dropIndex = pinned.indexOf(to);
+    protected _reorderColumns(from: IgxColumnComponent, to: IgxColumnComponent, position: DropPosition, columnCollection: any[]) {
+        let dropIndex = columnCollection.indexOf(to);
 
         if (to.columnGroup) {
             dropIndex += to.allChildren.length;
@@ -3680,9 +3679,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             dropIndex++;
         }
 
-        pinned.splice(dropIndex, 0, ...pinned.splice(pinned.indexOf(from), 1));
+        columnCollection.splice(dropIndex, 0, ...columnCollection.splice(columnCollection.indexOf(from), 1));
     }
-
     /**
      * @hidden
      */
@@ -3735,18 +3733,25 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         }
 
         if (dropTarget.pinned && column.pinned) {
-            this._reorderPinnedColumns(column, dropTarget, position);
+            this._reorderColumns(column, dropTarget, position, this._pinnedColumns);
         }
 
         if (dropTarget.pinned && !column.pinned) {
             column.pin();
-            this._reorderPinnedColumns(column, dropTarget, position);
+            this._reorderColumns(column, dropTarget, position, this._pinnedColumns);
+
         }
 
         if (!dropTarget.pinned && column.pinned) {
             column.unpin();
+            let list = [];
+
+            if (this.pinnedColumns.indexOf(column) === -1 && this.pinnedColumns.indexOf(dropTarget) === -1) {
+                list = this._unpinnedColumns;
+            } else {
+                list = this._pinnedColumns;
+            }
 
-            const list = this.columnList.toArray();
             const fi = list.indexOf(column);
             const ti = list.indexOf(dropTarget);
 
@@ -3759,6 +3764,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             }
         }
 
+        if (!dropTarget.pinned) {
+            this._reorderColumns(column, dropTarget, position, this._unpinnedColumns);
+        }
+
         this._moveColumns(column, dropTarget, position);
         this.notifyChanges();
         if (this.hasColumnLayouts) {
@@ -4956,7 +4965,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     protected reinitPinStates() {
         this._pinnedColumns = (this.hasColumnGroups) ? this.columnList.filter((c) => c.pinned) :
             this.columnList.filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
-        this._unpinnedColumns = this.columnList.filter((c) => !c.pinned);
+        this._unpinnedColumns = this.hasColumnGroups ? this.columnList.filter((c) => !c.pinned) :
+        this.columnList.filter((c) => !c.pinned)
+        .sort((a, b) => this._unpinnedColumns.indexOf(a) - this._unpinnedColumns.indexOf(b));
     }
 
     /**