diff --git a/projects/igniteui-angular/src/lib/grids/column.component.ts b/projects/igniteui-angular/src/lib/grids/column.component.ts index 194d10489a7..e55193a4d24 100644 --- a/projects/igniteui-angular/src/lib/grids/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/column.component.ts @@ -1852,7 +1852,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After */ this.children.changes.pipe(takeUntil(this.destroy$)) .subscribe((change) => { - if (change.length > 1 && change.first === this) { + if (change.first === this) { this.children.reset(this.children.toArray().slice(1)); this.children.forEach(child => { child.parent = this; diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts index 859bc973f65..6f084e03ecb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts @@ -1469,21 +1469,29 @@ describe('IgxGrid - multi-column headers', () => { expect(grid.columnList.length).toEqual(9); + expect(() => { + // Delete all column + fixture.componentInstance.columnGroups[0].columns.splice(0, 2); + fixture.detectChanges(); + }).not.toThrow(); + + expect(grid.columnList.length).toEqual(7); + expect(() => { // Add column fixture.componentInstance.columnGroups[0].columns.push({ field: 'Fax', type: 'string' }); fixture.detectChanges(); }).not.toThrow(); - expect(grid.columnList.length).toEqual(10); + expect(grid.columnList.length).toEqual(8); expect(() => { // Update column - fixture.componentInstance.columnGroups[0].columns[1] = { field: 'City', type: 'string' }; + fixture.componentInstance.columnGroups[0].columns[0] = { field: 'City', type: 'string' }; fixture.detectChanges(); }).not.toThrow(); - expect(grid.columnList.length).toEqual(10); + expect(grid.columnList.length).toEqual(8); }); }); @@ -1864,15 +1872,15 @@ export class DynamicColGroupsGridComponent { { columnHeader: 'First', columns: [ { field: 'ID', type: 'string' }, { field: 'CompanyName', type: 'string' }, - { field: 'ContactName', type: 'string' }, + { field: 'ContactName', type: 'string' } ]}, { columnHeader: 'Second', columns: [ { field: 'ContactTitle', type: 'string' }, - { field: 'Address', type: 'string' }, + { field: 'Address', type: 'string' } ]}, { columnHeader: 'Third', columns: [ { field: 'PostlCode', type: 'string' }, - { field: 'Contry', type: 'string' }, + { field: 'Contry', type: 'string' } ]}, ]; }