Merge pull request #8705 from IgniteUI/ttonev/fix-8194-9.1.x

fix(grid): column unpining order #8194 9.1.x

Author: kdinev

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

@@ -5214,7 +5214,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         .filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
         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));
+                .sort((a, b) => a.index - b.index);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/column-pinning.spec.ts

@@ -242,6 +242,27 @@ describe('Column Pinning UI #grid', () => {
             toolbar = grid.toolbar.columnPinningUI;
             expect(toolbar.pinnableColumns.length).toBe(4);
         });
+
+        it('Checks order of columns after unpinning', () => {
+            for (const column of grid.columns) {
+                column.pin();
+            }
+            fix.detectChanges();
+            grid.getColumnByName('ID').unpin();
+            grid.getColumnByName('ReleaseDate').unpin();
+            grid.getColumnByName('Downloads').unpin();
+            grid.getColumnByName('ProductName').unpin();
+            grid.getColumnByName('Released').unpin();
+            fix.detectChanges();
+            grid.unpinnedColumns.forEach((column, index) => {
+                if (index === grid.unpinnedColumns.length - 1) {
+                    return;
+                }
+                expect(
+                    column.index < grid.unpinnedColumns[index + 1].index
+                ).toBe(true);
+            });
+        });
     });
 
     describe('', () => {