Merge pull request #7608 from IgniteUI/mdragnev/group-area-row

feat(igxGrid): Add an input that enable/disable group area row

Author: ChronosSF

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+## 10.0.0
+
+### New Features
+
+- `IgxGrid`
+    - `showGroupArea` input is added, which can be used to enable/disable the group area row.
 
 ## 10.0
 

projects/igniteui-angular/src/lib/grids/README.md

@@ -212,6 +212,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 | `isLoading` | bool | Sets if the grid is waiting for data - default value false. |
 | `rowDraggable` | bool | Sets if the grid rows can be dragged |
 | `columnSelection` | GridSelectionMode | Sets if the grid columns can be selected |
+| `showGroupArea` | boolean | Set/get whether the group are row is shown |
 
 ### Outputs
 

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

@@ -3,7 +3,7 @@
 </igx-grid-toolbar>
 
 <div [style.flex-basis.px]='outerWidth' class="igx-grid__grouparea"
-    *ngIf="groupingExpressions.length > 0 || hasGroupableColumns" #groupArea>
+    *ngIf="showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)" #groupArea>
     <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)"

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

@@ -111,6 +111,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     private _data;
     private _hideGroupedColumns = false;
     private _dropAreaMessage = null;
+    private _showGroupArea = true;
 
     /**
      * Gets/Sets the value of the `id` attribute.
@@ -699,6 +700,14 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         return this.columnList.some((col) => col.groupable && !col.columnGroup);
     }
 
+    @Input()
+    public get showGroupArea(): boolean {
+        return this._showGroupArea;
+    }
+    public set showGroupArea(value: boolean) {
+        this._showGroupArea = value;
+    }
+
     private _setGroupColsVisibility(value) {
         if (this.columnList.length > 0 && !this.hasColumnLayouts) {
             this.groupingExpressions.forEach((expr) => {

src/app/grid-groupby/grid-groupby.sample.html

@@ -29,4 +29,6 @@
     <br />
     <button igxButton="raised" (click)="toggleDensity()">Toggle density</button>
     <div>Current Display Density: {{displayDensityOptions.displayDensity}}</div>
+
+    <button igxButton="raised" (click)="hideGroupableRow()">Show/Hide groupable row</button>
 </div>

src/app/grid-groupby/grid-groupby.sample.ts

@@ -145,4 +145,9 @@ export class GridGroupBySampleComponent implements OnInit {
     public selectSummaryMode(event) {
         this.summaryMode = this.summaryModes[event.index].label;
     }
+
+    public hideGroupableRow() {
+        this.grid1.showGroupArea = !this.grid1.showGroupArea;
+        this.grid1.cdr.detectChanges();
+    }
 }