fix(grid): Remove column filter when remove a column #5494

Author: nrobakova

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -328,13 +328,6 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
     }
 
     public clear_filter(fieldName: string) {
-        if (fieldName) {
-            const column = this.get_column_by_name(fieldName);
-            if (!column) {
-                return;
-            }
-        }
-
         const grid = this.grid;
         grid.endEdit(false);
         const filteringState = grid.filteringExpressionsTree;

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

@@ -218,10 +218,10 @@ export class IgxFilteringService implements OnDestroy {
         if (!this.columnToExpressionsMap.has(columnId)) {
             const column = this.grid.columns.find((col) => col.field === columnId);
             const expressionUIs = new Array<ExpressionUI>();
-
-            this.generateExpressionsList(column.filteringExpressionsTree, this.grid.filteringExpressionsTree.operator, expressionUIs);
-            this.columnToExpressionsMap.set(columnId, expressionUIs);
-
+            if (column) {
+                this.generateExpressionsList(column.filteringExpressionsTree, this.grid.filteringExpressionsTree.operator, expressionUIs);
+                this.columnToExpressionsMap.set(columnId, expressionUIs);
+            }
             return expressionUIs;
         }
 
@@ -322,7 +322,7 @@ export class IgxFilteringService implements OnDestroy {
         }
 
         const column = this.grid.columns.find((col) => col.field === columnId);
-        const isComplex = this.isFilteringTreeComplex(column.filteringExpressionsTree);
+        const isComplex = column && this.isFilteringTreeComplex(column.filteringExpressionsTree);
         if (isComplex) {
             this.columnsWithComplexFilter.add(columnId);
         }

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

@@ -5,10 +5,11 @@ import { IgxGridComponent } from './grid.component';
 import { IgxGridModule } from './index';
 import { GridTemplateStrings, ColumnDefinitions } from '../../test-utils/template-strings.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
-import { ColumnHiddenFromMarkupComponent, ColumnCellFormatterComponent } from '../../test-utils/grid-samples.spec';
+import { ColumnHiddenFromMarkupComponent, ColumnCellFormatterComponent, DynamicColumnsComponent } from '../../test-utils/grid-samples.spec';
 import { wait } from '../../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxStringFilteringOperand } from 'igniteui-angular';
 
 describe('IgxGrid - Column properties', () => {
     configureTestSuite();
@@ -24,7 +25,8 @@ describe('IgxGrid - Column properties', () => {
                 TemplatedInputColumnsComponent,
                 ColumnCellFormatterComponent,
                 ColumnHaederClassesComponent,
-                ColumnHiddenFromMarkupComponent
+                ColumnHiddenFromMarkupComponent,
+                DynamicColumnsComponent
             ],
             imports: [IgxGridModule, NoopAnimationsModule]
         })
@@ -301,6 +303,31 @@ describe('IgxGrid - Column properties', () => {
             expect(grid.getCellByColumn(i, 'Name').value).toBe(expectedVal[i]);
         }
     });
+
+    it('should remove filter when a columns is removed dynamically', () => {
+        const fix = TestBed.createComponent(DynamicColumnsComponent);
+        fix.detectChanges();
+
+        const columns = fix.componentInstance.columns;
+        const grid = fix.componentInstance.grid;
+        grid.allowFiltering = true;
+        fix.detectChanges();
+
+        expect(grid.columns.length).toBe(7);
+
+        grid.filter('CompanyName', 'NoItemsFound', IgxStringFilteringOperand.instance().condition('contains'), true);
+        fix.detectChanges();
+
+        expect(grid.rowList.length).toEqual(0);
+
+        expect(() => {
+            fix.componentInstance.columns =  columns.slice(2, columns.length - 1);
+            fix.detectChanges();
+        }).not.toThrow();
+
+        expect(grid.rowList.length).toBeGreaterThan(10);
+        expect(grid.columns.length).toBe(4);
+    });
 });
 
 @Component({

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1099,3 +1099,23 @@ export class IgxGridClipboardComponent extends BasicGridComponent {
     public data = SampleTestData.excelFilteringData();
     formatter = (value: any) => `** ${value} **`;
 }
+
+@Component({
+    template: GridTemplateStrings.declareGrid(` [height]="height" [width]="width"`, ``,
+                ColumnDefinitions.generatedWithDataType)
+})
+export class DynamicColumnsComponent extends GridWithSizeComponent {
+    public columns = [
+        { field: 'ID', width: 100 , dataType: 'number'},
+        { field: 'CompanyName', width: 300 , dataType: 'string'},
+        { field: 'ContactName', width: 200 , dataType: 'string'},
+        { field: 'ContactTitle', width: 200 , dataType: 'string'},
+        { field: 'Address', width: 300 , dataType: 'string'},
+        { field: 'City', width: 100 , dataType: 'string'},
+        { field: 'Region', width: 100 , dataType: 'string'}
+    ];
+
+    data = SampleTestData.contactInfoDataFull();
+    width = '800px';
+    height = '800px';
+}