fix(grid): Clear grouping and close filter row when remove a column #5494

Author: nrobakova

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

@@ -419,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/grid-base.component.ts

@@ -4285,9 +4285,15 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             });
 
             diff.forEachRemovedItem((record: IterableChangeRecord<IgxColumnComponent>) => {
+                // Clear Grouping
+                this.gridAPI.clear_groupby(record.item.field);
+
                 // Clear Filtering
                 this.gridAPI.clear_filter(record.item.field);
 
+                // Close filter row
+                this.filteringService.isFilterRowVisible = false;
+
                 // Clear Sorting
                 this.gridAPI.clear_sort(record.item.field);
                 removed = true;

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

@@ -9,7 +9,7 @@ import { ColumnHiddenFromMarkupComponent, ColumnCellFormatterComponent, DynamicC
 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';
+import { IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular';
 
 describe('IgxGrid - Column properties', () => {
     configureTestSuite();
@@ -304,7 +304,7 @@ describe('IgxGrid - Column properties', () => {
         }
     });
 
-    it('should remove filter when a columns is removed dynamically', () => {
+    it('should clear filter when a columns is removed dynamically', () => {
         const fix = TestBed.createComponent(DynamicColumnsComponent);
         fix.detectChanges();
 
@@ -321,13 +321,45 @@ describe('IgxGrid - Column properties', () => {
         expect(grid.rowList.length).toEqual(0);
 
         expect(() => {
-            fix.componentInstance.columns =  columns.slice(2, columns.length - 1);
+            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) {