Merge branch '8.2.x' into tzhelev/fix-5886-8.2.x

Author: tachojelev

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

@@ -592,6 +592,9 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
 	 * @memberof IgxGridComponent
      */
     public groupBy(expression: IGroupingExpression | Array<IGroupingExpression>): void {
+        if (this.checkIfNoColumnField(expression)) {
+            return;
+        }
         this.endEdit(true);
         if (expression instanceof Array) {
             this._gridAPI.groupBy_multiple(expression);
@@ -992,4 +995,17 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
             this.navigation.grid = this;
         }
     }
+
+    private checkIfNoColumnField(expression: IGroupingExpression | Array<IGroupingExpression> | any): boolean {
+        if (expression instanceof Array) {
+            for (const singleExpression of expression) {
+                if (!singleExpression.fieldName) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        return !expression.fieldName;
+    }
+
 }

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

@@ -78,7 +78,7 @@ export class IgxGroupAreaDropDirective extends IgxDropDirective {
         }
         const grid = <IgxGridComponent>column.grid;
         const isGrouped = grid.groupingExpressions.findIndex((item) => item.fieldName === column.field) !== -1;
-        if (column.groupable && !isGrouped && !column.columnGroup) {
+        if (column.groupable && !isGrouped && !column.columnGroup && !!column.field) {
             drag.icon.innerText = 'group_work';
             this.hovered = true;
         } else {
@@ -106,7 +106,7 @@ export class IgxGroupAreaDropDirective extends IgxDropDirective {
             }
             const grid = <IgxGridComponent>column.grid;
             const isGrouped = grid.groupingExpressions.findIndex((item) => item.fieldName === column.field) !== -1;
-            if (column.groupable && !isGrouped && !column.columnGroup) {
+            if (column.groupable && !isGrouped && !column.columnGroup && !!column.field) {
                 grid.groupBy({ fieldName: column.field, dir: SortingDirection.Asc, ignoreCase: column.sortingIgnoreCase,
                     strategy: column.sortStrategy, groupingComparer: column.groupingComparer });
             }

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

@@ -40,6 +40,7 @@ describe('IgxGrid - GroupBy #grid', () => {
                 GroupableGridComponent,
                 CustomTemplateGridComponent,
                 GroupByDataMoreColumnsComponent,
+                GroupByEmptyColumnFieldComponent,
                 MultiColumnHeadersWithGroupingComponent
             ],
             imports: [NoopAnimationsModule, IgxGridModule]
@@ -2026,6 +2027,19 @@ describe('IgxGrid - GroupBy #grid', () => {
         expect(m).toBe('Maximum amount of grouped columns is 10.');
     }));
 
+    it('should not allow grouping by column with no name', fakeAsync(() => {
+        const fix = TestBed.createComponent(GroupByEmptyColumnFieldComponent);
+        const grid = fix.componentInstance.instance;
+        fix.detectChanges();
+        tick();
+        const expr = grid.columns.map(val => {
+            return { fieldName: val.field, dir: SortingDirection.Asc, ignoreCase: true };
+        });
+        grid.groupBy(expr);
+        tick();
+        expect(grid.groupsRowList.toArray().length).toBe(0);
+    }));
+
     it('should display column header text in the grouping chip.', fakeAsync(() => {
         const fix = TestBed.createComponent(DefaultGridComponent);
         const grid = fix.componentInstance.instance;
@@ -2741,5 +2755,25 @@ export class GroupByDataMoreColumnsComponent extends DataParent {
     public instance: IgxGridComponent;
 }
 
+@Component({
+    template: `
+        <igx-grid
+            [width]='width'
+            [autoGenerate]='false'
+            [data]='data'>
+            <igx-column [width]='width' [groupable]='true'>
+                <ng-template igxCell>
+                    <button>Dummy button</button>
+                </ng-template>
+            </igx-column>
+        </igx-grid>
+    `
+})
+export class GroupByEmptyColumnFieldComponent extends DataParent {
+    public width = '200px';
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
+    public instance: IgxGridComponent;
+}
+
 export class CustomSortingStrategy extends DefaultSortingStrategy {
 }