Merge pull request #5501 from IgniteUI/nrobakova/fix-issue-5494

Clear grouping and filtering when removing a column

Author: kdinev

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;
@@ -426,6 +419,9 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
     protected remove_grouping_expression(fieldName) {
     }
 
+    public clear_groupby(name?: string | Array<string>) {
+    }
+
     public should_apply_number_style(column: IgxColumnComponent): boolean {
         return column.dataType === DataType.Number;
     }

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-base.component.ts

@@ -4314,13 +4314,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             diff.forEachRemovedItem((record: IterableChangeRecord<IgxColumnComponent | IgxColumnGroupComponent>) => {
                 const isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                 if (!isColumnGroup) {
+                    // Clear Grouping
+                    this.gridAPI.clear_groupby(record.item.field);
+
                     // Clear Filtering
                     this.gridAPI.clear_filter(record.item.field);
 
+                    // Close filter row
+                    if ( this.filteringService.isFilterRowVisible
+                        && this.filteringService.filteredColumn
+                        && this.filteringService.filteredColumn.field === record.item.field) {
+                        this.filteringRow.close();
+                    }
+
                     // Clear Sorting
                     this.gridAPI.clear_sort(record.item.field);
                 }
-
                 removed = true;
             });
 

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, SortingDirection } 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,63 @@ describe('IgxGrid - Column properties', () => {
             expect(grid.getCellByColumn(i, 'Name').value).toBe(expectedVal[i]);
         }
     });
+
+    it('should clear 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);
+    });
+
+    it('should clear grouping when a columns is removed dynamically', () => {
+        const fix = TestBed.createComponent(DynamicColumnsComponent);
+        fix.detectChanges();
+
+        const columns = fix.componentInstance.columns;
+        const grid = fix.componentInstance.grid;
+        grid.getColumnByName('CompanyName').groupable = true;
+        grid.getColumnByName('Address').groupable = true;
+        grid.getColumnByName('City').groupable = true;
+        fix.detectChanges();
+
+        grid.groupBy({
+            fieldName: 'CompanyName', dir: SortingDirection.Asc, ignoreCase: false
+        });
+
+        fix.detectChanges();
+
+        let groupRows = grid.nativeElement.querySelectorAll('igx-grid-groupby-row');
+
+        expect(groupRows.length).toBeGreaterThan(0);
+
+        expect(() => {
+            fix.componentInstance.columns = columns.slice(2, columns.length - 1);
+            fix.detectChanges();
+        }).not.toThrow();
+
+        groupRows = grid.nativeElement.querySelectorAll('igx-grid-groupby-row');
+
+        expect(groupRows.length).toBe(0);
+        expect(grid.columns.length).toBe(4);
+    });
 });
 
 @Component({

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -7,11 +7,11 @@
     <igx-chips-area (onReorder)="chipsOrderChanged($event)" (onMoveEnd)="chipsMovingEnded()">
         <ng-container *ngFor="let expr of chipsGoupingExpressions; let last = last;">
             <igx-chip [id]="expr.fieldName" [attr.title]="getGroupByChipTitle(expr)"
-                [removable]="getColumnByName(expr.fieldName).groupable"
-                [draggable]="getColumnByName(expr.fieldName).groupable" [displayDensity]="displayDensity"
+                [removable]="getColumnGroupable(expr.fieldName)"
+                [draggable]="getColumnGroupable(expr.fieldName)" [displayDensity]="displayDensity"
                 (onKeyDown)="onChipKeyDown($event)" (onRemove)="onChipRemoved($event)"
-                (onClick)="getColumnByName(expr.fieldName).groupable ? onChipClicked($event): null"
-                [disabled]='!getColumnByName(expr.fieldName).groupable'>
+                (onClick)="getColumnGroupable(expr.fieldName) ? onChipClicked($event): null"
+                [disabled]='!getColumnGroupable(expr.fieldName)'>
                 <span>{{ getGroupByChipTitle(expr) }}</span>
                 <igx-icon igxSuffix>{{ expr.dir == 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
             </igx-chip>

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

@@ -902,7 +902,16 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
      * @hidden
      */
     public getGroupByChipTitle(expression: IGroupingExpression): string {
-        return this.getColumnByName(expression.fieldName).header || expression.fieldName;
+        const column = this.getColumnByName(expression.fieldName);
+        return (column && column.header) || expression.fieldName;
+    }
+
+    /**
+     * @hidden
+     */
+    public getColumnGroupable(fieldName: string): boolean {
+        const column = this.getColumnByName(fieldName);
+        return column && column.groupable;
     }
 
     /**

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

@@ -9,6 +9,7 @@ import {
     ViewChild,
 } from '@angular/core';
 import { IGroupByRecord } from '../../data-operations/groupby-record.interface';
+import { DataType } from '../../data-operations/data-util';
 import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseComponent, IGridDataBindable } from '../grid-base.component';
 import { IgxGridSelectionService, ISelectionNode } from '../../core/grid-selection';
@@ -250,7 +251,8 @@ export class IgxGridGroupByRowComponent {
      * @hidden
      */
     get dataType(): any {
-        return this.grid.getColumnByName(this.groupRow.expression.fieldName).dataType;
+        const column = this.grid.getColumnByName(this.groupRow.expression.fieldName);
+        return (column && column.dataType) || DataType.String;
     }
 
     private handleTabKey(shift: boolean, activeNode: ISelectionNode) {

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';
+}