fix(multi-column-headers): error is thrown when dynamically removing mch

error is thrown, when dynamically removing a multi column header from a
bound collecting with filtering enabled

Closes #5393

Author: Aleksandyr

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

@@ -49,7 +49,7 @@ import { IgxCheckboxComponent } from './../checkbox/checkbox.component';
 import { GridBaseAPIService } from './api.service';
 import { IgxGridCellComponent } from './cell.component';
 import { IColumnVisibilityChangedEventArgs } from './column-hiding-item.directive';
-import { IgxColumnComponent } from './column.component';
+import { IgxColumnComponent, IgxColumnGroupComponent } from './column.component';
 import { ISummaryExpression } from './summaries/grid-summary';
 import { DropPosition, ContainerPositioningStrategy, IgxDecimalPipeComponent, IgxDatePipeComponent } from './grid.common';
 import { IgxGridToolbarComponent } from './grid-toolbar.component';
@@ -4283,12 +4283,18 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                 added = true;
             });
 
-            diff.forEachRemovedItem((record: IterableChangeRecord<IgxColumnComponent>) => {
-                // Clear Filtering
-                this.gridAPI.clear_filter(record.item.field);
+            diff.forEachRemovedItem((record: IterableChangeRecord<IgxColumnComponent | IgxColumnGroupComponent>) => {
+                const isColumnGroup = record.item instanceof IgxColumnGroupComponent;
+                if (isColumnGroup) {
+                    this.clearSortingAndFilteringRecursively(record.item);
+                } else {
+                    // Clear Filtering
+                    this.gridAPI.clear_filter(record.item.field);
+
+                    // Clear Sorting
+                    this.gridAPI.clear_sort(record.item.field);
+                }
 
-                // Clear Sorting
-                this.gridAPI.clear_sort(record.item.field);
                 removed = true;
             });
 
@@ -5099,6 +5105,19 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return false;
     }
 
+    private clearSortingAndFilteringRecursively(column: IgxColumnGroupComponent | IgxColumnComponent) {
+        const isColumnGroup = column instanceof IgxColumnGroupComponent;
+        if (isColumnGroup) {
+            const columnChildren = column.children;
+            columnChildren.forEach((col: IgxColumnComponent | IgxColumnGroupComponent) => {
+                return this.clearSortingAndFilteringRecursively(col);
+            });
+        } else  {
+            this.gridAPI.clear_filter(column.field);
+            this.gridAPI.clear_sort(column.field);
+        }
+    }
+
     /**
      * @hidden
      */

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

@@ -1,7 +1,8 @@
 import { async, TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
 import { IgxGridModule } from './grid.module';
 import { IgxGridComponent } from './grid.component';
-import { Component, ViewChild, DebugElement, OnInit, TemplateRef } from '@angular/core';
+import { Component, ViewChild, DebugElement, OnInit, TemplateRef, ElementRef } from '@angular/core';
+
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxColumnComponent, IgxColumnGroupComponent } from '../column.component';
 import { SortingDirection } from '../../data-operations/sorting-expression.interface';
@@ -17,7 +18,7 @@ const GRID_COL_GROUP_THEAD_TITLE_CLASS = 'igx-grid__thead-title';
 const GRID_COL_GROUP_THEAD_GROUP_CLASS = 'igx-grid__thead-group';
 const GRID_COL_THEAD_CLASS = '.igx-grid__th';
 
-describe('IgxGrid - multi-column headers', () => {
+fdescribe('IgxGrid - multi-column headers', () => {
     configureTestSuite();
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -38,7 +39,8 @@ describe('IgxGrid - multi-column headers', () => {
                 NestedColumnGroupsGridComponent,
                 DynamicGridComponent,
                 NumberColWidthGridComponent,
-                NestedColGroupsWithTemplatesGridComponent
+                NestedColGroupsWithTemplatesGridComponent,
+                DynamicColGroupsGridComponent
             ],
             imports: [
                 NoopAnimationsModule,
@@ -1416,6 +1418,40 @@ describe('IgxGrid - multi-column headers', () => {
         headerSpans = fixture.debugElement.queryAll(By.css('.' + GRID_COL_GROUP_THEAD_TITLE_CLASS));
         expect(headerSpans[1].nativeElement.textContent).toBe('Location');
     }));
+
+    it('There shouldn\'t be any errors when dynamically removing a column group with filtering enabled', () => {
+        const fixture = TestBed.createComponent(DynamicColGroupsGridComponent);
+        fixture.detectChanges();
+
+        const grid = fixture.componentInstance.grid;
+        const button = fixture.componentInstance.removeBtn;
+
+        let columnLength = grid.columnList.length;
+        let firstColumnGroup = grid.columnList.first;
+        let expectedColumnName = 'First';
+        let expectedColumnListLength = 10;
+
+        expect(firstColumnGroup.header).toEqual(expectedColumnName);
+        expect(expectedColumnListLength).toEqual(columnLength);
+
+        expect(() => {
+            // Delete first column group
+            button.nativeElement.dispatchEvent(new Event('click'));
+            fixture.detectChanges();
+
+            // Delete first column group
+            button.nativeElement.dispatchEvent(new Event('click'));
+            fixture.detectChanges();
+        }).not.toThrow();
+
+        firstColumnGroup = grid.columnList.first;
+        expectedColumnName = 'Third';
+        columnLength = grid.columnList.length;
+        expectedColumnListLength = 3;
+
+        expect(firstColumnGroup.header).toEqual(expectedColumnName);
+        expect(expectedColumnListLength).toEqual(columnLength);
+    });
 });
 
 @Component({
@@ -1766,6 +1802,54 @@ export class NestedColGroupsGridComponent {
     data = SampleTestData.contactInfoDataFull();
 }
 
+@Component({
+    template: `
+        <igx-grid [data]="data" [allowFiltering]="true">
+            <igx-column-group *ngFor="let colGroup of columnGroups" [header]="colGroup.columnHeader">
+                <igx-column *ngFor="let column of colGroup.columns" [field]="column.field" [dataType]="column.type"
+                    [filterable]="true"></igx-column>
+            </igx-column-group>
+        </igx-grid>
+        <article>
+            <button #removeFirstColGroup (click)="removeFirstColumnGroup()">Remove first column group</button>
+        </article>
+    `
+})
+export class DynamicColGroupsGridComponent {
+
+    @ViewChild(IgxGridComponent, { static: true })
+    public grid: IgxGridComponent;
+
+    @ViewChild('removeFirstColGroup', { static: true })
+    public removeBtn: ElementRef;
+
+    public columnGroups: Array<any>;
+    public data = SampleTestData.contactInfoDataFull();
+
+    constructor() {
+        this.columnGroups = [
+            { columnHeader: 'First', columns: [
+                { field: 'ID', type: 'string' },
+                { field: 'CompanyName', type: 'string' },
+                { field: 'ContactName', type: 'string' },
+            ]},
+            { columnHeader: 'Second', columns: [
+                { field: 'ContactTitle', type: 'string' },
+                { field: 'Address', type: 'string' },
+            ]},
+            { columnHeader: 'Third', columns: [
+                { field: 'PostlCode', type: 'string' },
+                { field: 'Contry', type: 'string' },
+            ]},
+        ];
+    }
+
+    public removeFirstColumnGroup() {
+        this.columnGroups = this.columnGroups.splice(1, this.columnGroups.length - 1);
+    }
+
+}
+
 @Component({
     template: `
     <igx-grid #grid [data]="data" height="600px" width="1000px" columnWidth="100px">