diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 94ecf6ca9ff..702060d4307 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -2256,7 +2256,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy // estimate the exact index at which column will be inserted // takes into account initial unpinned index of the column if (!hasIndex) { - const indices = grid.unpinnedColumns.map(col => col.index); + const indices = grid._unpinnedColumns.map(col => col.index); indices.push(this.index); indices.sort((a, b) => a - b); index = indices.indexOf(this.index); diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-pinning.spec.ts index f710cf93840..74e2180def0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-pinning.spec.ts @@ -111,27 +111,6 @@ describe('Column Pinning UI #grid', () => { verifyColumnIsPinned(column, false, 0); }); - it('Checks order of columns after unpinning', () => { - for (const column of grid.columnList) { - 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); @@ -310,6 +289,36 @@ describe('Column Pinning UI #grid', () => { ).toBe(true); }); }); + + it('Checks order of columns after unpinning if there are hidden columns', () => { + // Columns are ordered like this: ID, ProductName, Downloads, Released, ReleaseDate + expect(grid.getColumnByName('Downloads').index).toBe(2); + expect(grid.getColumnByName('Released').index).toBe(3); + + grid.getColumnByName('ID').hidden = true; + grid.getColumnByName('Downloads').pin(); + grid.getColumnByName('Released').pin(); + fix.detectChanges(); + + // unpinnedColumns contains only visible cols + expect(grid.unpinnedColumns.length).toBe(2); + // _unpinnedColumns contains all unpinned cols (including hidden) + expect((grid as any)._unpinnedColumns.length).toBe(3); + + grid.getColumnByName('Released').unpin(); + fix.detectChanges(); + + expect(grid.unpinnedColumns.length).toBe(3); + expect((grid as any)._unpinnedColumns.length).toBe(4); + // Downloads is still pinned; ID is not part of unpinnedColumns + expect(grid.getColumnByName('Released').field).toEqual((grid as any).unpinnedColumns[1].field); + expect(grid.getColumnByName('Released').field).toEqual((grid as any)._unpinnedColumns[2].field); + + grid.getColumnByName('Downloads').unpin(); + fix.detectChanges(); + expect(grid.getColumnByName('Downloads').field).toEqual((grid as any).unpinnedColumns[1].field); + expect(grid.getColumnByName('Downloads').field).toEqual((grid as any)._unpinnedColumns[2].field); + }); }); describe('Pinning with Column Groups', () => {