Merge pull request #8512 from IgniteUI/ttonev/fix-8194-master

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

Author: kdinev

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

@@ -5491,7 +5491,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

@@ -113,6 +113,27 @@ describe('Column Pinning UI #grid', () => {
             verifyColumnIsPinned(column, false, 0);
         });
 
+        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);
+            });
+        });
+
         it('reflects properly grid column pinned value changes.', () => {
             const name = 'ReleaseDate';
             verifyCheckbox(name, false, false, columnChooserElement, fix);