Merge pull request #11268 from IgniteUI/vkombov/fix-10619-13.1.x

fix(grid): Fix errors thrown when grid is grouped by a column that isn't defined - 13.1.x
IgniteUI · Mar 29, 2022 · 807ac1c · 807ac1c
2 parents c64f054 + fb46410
commit 807ac1c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
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
@@ -323,6 +323,21 @@ describe('IgxGrid - multi-column headers #grid', () => {
             expect(grid.columnList.length).toEqual(10);
         });
 
+        it('There shouldn\'t be any errors when the grid is grouped by a column that isn\'t defined', () => {
+            fixture = TestBed.createComponent(ColumnGroupTestComponent);
+            fixture.componentInstance.hideGroupedColumns = true;
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+
+            expect(() => {
+                grid.groupBy({
+                    fieldName: 'NonExistentFieldName', dir: SortingDirection.Desc, ignoreCase: false,
+                    strategy: DefaultSortingStrategy.instance()
+                });
+                fixture.detectChanges();
+            }).not.toThrow();
+        });
+
         it('should set title attribute on column group header spans', () => {
             fixture = TestBed.createComponent(ColumnGroupTestComponent);
             fixture.detectChanges();

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -979,7 +979,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
             if (changes && this.columnList.length > 0) {
                 changes.forEachAddedItem((rec) => {
                     const col = this.getColumnByName(rec.item.fieldName);
-                    col.hidden = true;
+                    if (col) {
+                        col.hidden = true;
+                    }
                 });
                 changes.forEachRemovedItem((rec) => {
                     const col = this.getColumnByName(rec.item.fieldName);

diff --git a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.directive.ts
@@ -189,6 +189,6 @@ export class IgxGroupByMetaPipe implements PipeTransform {
 
     public transform(key: string, grid: GridType) {
         const column = grid.getColumnByName(key);
-        return { groupable: column.groupable, title: column.header || key };
+        return { groupable: !!column?.groupable, title: column?.header || key };
     }
 }
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-mch-sample.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-mch-sample.spec.ts
@@ -47,7 +47,7 @@ export class OneGroupThreeColsGridComponent {
 
 @Component({
     template: `
-    <igx-grid #grid [data]="data" height="500px">
+    <igx-grid #grid [data]="data" height="500px" [hideGroupedColumns]="hideGroupedColumns">
         <igx-column field="ID"></igx-column>
         <igx-column-group header="General Information">
             <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="CompanyName"></igx-column>
@@ -82,6 +82,8 @@ export class ColumnGroupTestComponent {
     public emptyColGroup: IgxColumnGroupComponent;
 
     public data = SampleTestData.contactInfoDataFull();
+
+    public hideGroupedColumns = false;
 }
 
 @Component({