MultiColumnHeaders should not be grouped - 6.2.x

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

@@ -227,7 +227,7 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective {
     }
 
     get draggable(): boolean {
-        return this.column && (this.column.movable || this.column.groupable);
+        return this.column && (this.column.movable || (this.column.groupable && !this.column.columnGroup));
     }
 
     public get icon(): HTMLElement {

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

@@ -567,7 +567,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do
 	 * @memberof IgxGridComponent
      */
     get hasGroupableColumns(): boolean {
-        return this.columnList.some((col) => col.groupable);
+        return this.columnList.some((col) => col.groupable && !col.columnGroup);
     }
 
     private _setGroupColsVisibility(value) {

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

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

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

@@ -17,6 +17,7 @@ import { HelperUtils} from '../../test-utils/helper-utils.spec';
 import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { DataParent } from '../../test-utils/sample-test-data.spec';
+import { MultiColumnHeadersWithGroupingComponent } from '../../test-utils/grid-samples.spec';
 
 describe('IgxGrid - GroupBy', () => {
     configureTestSuite();
@@ -36,7 +37,8 @@ describe('IgxGrid - GroupBy', () => {
                 DefaultGridComponent,
                 GroupableGridComponent,
                 CustomTemplateGridComponent,
-                GroupByDataMoreColumnsComponent
+                GroupByDataMoreColumnsComponent,
+                MultiColumnHeadersWithGroupingComponent
             ],
             imports: [NoopAnimationsModule, IgxGridModule.forRoot()]
         }).compileComponents();
@@ -2733,6 +2735,42 @@ describe('IgxGrid - GroupBy', () => {
             strategy: DefaultSortingStrategy.instance()}]);
     });
 
+    it('should not be able to group by ColumnGroup', (async () => {
+        const fix = TestBed.createComponent(MultiColumnHeadersWithGroupingComponent);
+        const grid = fix.componentInstance.grid;
+        fix.detectChanges();
+
+        // Try to group by a column group
+        const header = fix.debugElement.queryAll(By.css('.igx-grid__thead-title'))[0].nativeElement;
+        UIInteractions.simulatePointerEvent('pointerdown', header, 10, 10);
+        await wait();
+        UIInteractions.simulatePointerEvent('pointermove', header, 150, 22);
+        await wait(50);
+        UIInteractions.simulatePointerEvent('pointermove', header, 100, 30);
+        await wait(50);
+        UIInteractions.simulatePointerEvent('pointerup', header, 100, 30);
+        await wait(50);
+        fix.detectChanges();
+
+        // verify there is no grouping
+        const groupRows = grid.groupsRowList.toArray();
+        expect(groupRows.length).toBe(0);
+        expect(grid.groupingExpressions).toEqual([]);
+    }));
+
+    it('should not show the group area if only columnGroups has property groupable set to true', (async () => {
+        const fix = TestBed.createComponent(MultiColumnHeadersWithGroupingComponent);
+        fix.detectChanges();
+        const grid = fix.componentInstance.grid;
+        grid.getColumnByName('ID').groupable = false;
+        await wait(30);
+        fix.detectChanges();
+
+        const gridElement: HTMLElement = fix.nativeElement.querySelector('.igx-grid');
+        // verify group area is not rendered
+        expect(gridElement.querySelectorAll('.igx-grid__grouparea').length).toEqual(0);
+    }));
+
     function sendInput(element, text, fix) {
         element.nativeElement.value = text;
         element.nativeElement.dispatchEvent(new Event('input'));

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

@@ -692,6 +692,16 @@ export class MultiColumnHeadersComponent extends BasicGridComponent {
     isPinned = false;
 }
 
+@Component({
+    template: `${GridTemplateStrings.declareGrid(`height="800px"  width="500px"`, '',
+        ColumnDefinitions.multiColHeadersWithGroupingColumns)}`
+})
+export class MultiColumnHeadersWithGroupingComponent extends BasicGridComponent {
+    data = SampleTestData.contactInfoDataFull();
+    isPinned = false;
+}
+
+
 @Component({
     template: `${GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.nameAvatar)}`
 })

projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts

@@ -361,6 +361,19 @@ export class ColumnDefinitions {
         </igx-column-group>
   `;
 
+  public static multiColHeadersWithGroupingColumns = `
+  <igx-column [width]="'100px'" [movable]="true" [resizable]="true" [pinned]="false"
+              [sortable]="true" [filterable]="true" field="Missing"></igx-column>
+  <igx-column-group [movable]="true" header="General Information" [groupable]='true'>
+      <igx-column [movable]="true" [width]="'130px'" [filterable]="true" [sortable]="true" field="CompanyName"></igx-column>
+      <igx-column-group [movable]="true" header="Person Details">
+          <igx-column [movable]="true" [width]="'100px'" field="ContactName"></igx-column>
+          <igx-column [movable]="true" [width]="'100px'"[filterable]="true" [sortable]="true" field="ContactTitle"></igx-column>
+      </igx-column-group>
+  </igx-column-group>
+  <igx-column [movable]="true" [resizable]="true" field="ID" [width]="'100px'" [groupable]='true'></igx-column>
+`;
+
     public static contactInfoGroupableColumns = `
     <igx-column [movable]="true" [hasSummary]="true" [resizable]="true"
                 [pinned]="true" field="Missing"></igx-column>