Merge pull request #4941 from IgniteUI/mkirova/fix-4714-7.3.x

fix(Grid): hideGroupedColumns option should have no effect in MRL grid.

Author: kdinev

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

@@ -631,10 +631,12 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
     }
 
     private _setGroupColsVisibility(value) {
-        this.groupingExpressions.forEach((expr) => {
-            const col = this.getColumnByName(expr.fieldName);
-            col.hidden = value;
-        });
+        if (this.columnList && !this.hasColumnLayouts) {
+            this.groupingExpressions.forEach((expr) => {
+                const col = this.getColumnByName(expr.fieldName);
+                col.hidden = value;
+            });
+        }
     }
 
     /**
@@ -872,7 +874,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
 
     public ngDoCheck(): void {
         super.ngDoCheck();
-        if (this.groupingDiffer) {
+        if (this.groupingDiffer && this.columnList && !this.hasColumnLayouts) {
             const changes = this.groupingDiffer.diff(this.groupingExpressions);
             if (changes && this.columnList) {
                 changes.forEachAddedItem((rec) => {

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts

@@ -1132,6 +1132,36 @@ describe('IgxGrid - multi-row-layout', () => {
         const groupRowBlocks = fixture.debugElement.query(By.css('.igx-grid__tbody')).queryAll(By.css('.igx-grid__mrl-block'));
         expect(groupRowBlocks[0].nativeElement.style.gridTemplateColumns).toEqual('118px 118px 118px 118px 118px 118px');
     });
+
+    it('should disregard hideGroupedColumns option and not hide columns when grouping when having column layouts.', () => {
+        const fixture = TestBed.createComponent(ColumnLayoutTestComponent);
+        fixture.componentInstance.colGroups = [{
+            group: 'group1',
+            columns: [
+                { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4},
+                { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6},
+                { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7},
+                { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3},
+                { field: 'City', rowStart: 2, colStart: 3, colEnd: 5},
+                { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7},
+                { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2},
+                { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3},
+                { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7},
+            ]
+        }];
+        const grid = fixture.componentInstance.grid;
+        grid.hideGroupedColumns = true;
+        fixture.detectChanges();
+
+        grid.groupBy({ fieldName: 'ContactTitle', dir: SortingDirection.Desc, ignoreCase: false,
+        strategy: DefaultSortingStrategy.instance() });
+        fixture.detectChanges();
+
+        // check column and group are not hidden
+        const col = grid.getColumnByName('ContactTitle');
+        expect(col.hidden).toBe(false);
+        expect(col.parent.hidden).toBe(false);
+    });
 });
 
 @Component({