Merge pull request #8676 from IgniteUI/ttonev/fix-8512-10.2.x

fix(grid): column unpinning order #8194 10.2.x

Author: zdrawku

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

@@ -5454,7 +5454,7 @@ export abstract 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

@@ -1,4 +1,3 @@
-
 import { DebugElement } from '@angular/core';
 import { TestBed, async, fakeAsync } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -239,6 +238,27 @@ describe('Column Pinning UI #grid', () => {
             toolbar = grid.toolbar.columnPinningUI;
             expect(toolbar.columnItems.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('', () => {