Merge pull request #7532 from IgniteUI/dkamburov/fix-6939-10.x

fix(group-by): Expose the column in IGroupByRecord and use header in group row

Author: ChronosSF

CHANGELOG.md

@@ -5,8 +5,10 @@ All notable changes for each version of this project will be documented in this
 ## 10.0.0
 
 ### General
+- `igxGrid`
+    - **Behavioral Change** - Group rows now display the group column's header name instead of field when one is available.
 - `igx-select`, `igx-combo`, `igx-drop-down`
-- **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
+    - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
 - `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
     - `origin` - it can vary within the values of the `TransactionEventOrigin` interface; 
     - `actions` - contains information about the transactions, that caused the emission of the event.

projects/igniteui-angular/src/lib/data-operations/groupby-record.interface.ts

@@ -1,4 +1,5 @@
 import { ISortingExpression } from './sorting-expression.interface';
+import { IgxColumnComponent } from '../grids/columns/column.component';
 
 /**
  * @hidden
@@ -13,4 +14,5 @@ export interface IGroupByRecord {
     groupParent: IGroupByRecord;
     groups?: IGroupByRecord[];
     height: number;
+    column?: IgxColumnComponent;
  }

projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts

@@ -160,14 +160,16 @@ export class IgxSorting implements IGridSortingStrategy {
         let result = [];
         while (i < data.length) {
             const group = this.groupedRecordsByExpression(data, i, expressions[level]);
+            const column = grid ? grid.getColumnByName(expressions[level].fieldName) : null;
             const groupRow: IGroupByRecord = {
                 expression: expressions[level],
                 level,
                 records: cloneArray(group),
                 value: group[0][expressions[level].fieldName],
                 groupParent: parent,
                 groups: [],
-                height: grid ? grid.renderedRowHeight : null
+                height: grid ? grid.renderedRowHeight : null,
+                column: column
             };
             if (parent) {
                 parent.groups.push(groupRow);

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

@@ -529,7 +529,8 @@ describe('IgxGrid - GroupBy #grid', () => {
         for (const grRow of groupRows) {
             const elem = grRow.groupContent.nativeElement;
             const grVal = grRow.groupRow.value === null ? '' : grRow.groupRow.value.toString();
-            const expectedText = 'Total items with value:' + grVal +
+            const expectedText = 'Grouping by "Is it Released". ' +
+                'Total items with value:' + grVal +
                 ' are ' + grRow.groupRow.records.length;
             expect(elem.innerText.trim(['\n', '\r', ' '])).toEqual(expectedText);
             const expander = grRow.nativeElement.querySelector('.igx-grid__grouping-indicator');
@@ -2694,9 +2695,12 @@ export class GroupableGridComponent extends DataParent {
             <igx-column [field]="'ReleaseDate'" [header]="'ReleaseDate'" [width]="200" [groupable]="true" [hasSummary]="false"></igx-column>
             <igx-column [field]="'Downloads'" [header]="'Downloads'" [width]="200" [groupable]="true" [hasSummary]="false"></igx-column>
             <igx-column [field]="'ProductName'" [header]="'ProductName'" [width]="200" [groupable]="true" [hasSummary]="false"></igx-column>
-            <igx-column [field]="'Released'" [header]="'Released'" [width]="200" [groupable]="true" [hasSummary]="false"></igx-column>
+            <igx-column [field]="'Released'" [header]="'Is it Released'" [width]="200" [groupable]="true" [hasSummary]="false"></igx-column>
             <ng-template igxGroupByRow let-groupRow>
-                <span>Total items with value:{{ groupRow.value }} are {{ groupRow.records.length }}</span>
+                <span>
+                    Grouping by "{{groupRow.column.header}}".
+                    Total items with value:{{ groupRow.value }} are {{ groupRow.records.length }}
+                </span>
             </ng-template>
             <ng-template igxRowExpandedIndicator let-groupRow>
                 <span>EXPANDED</span>

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

@@ -22,7 +22,9 @@
         <div class="igx-group-label">
             <igx-icon fontSet="material" class="igx-group-label__icon">group_work</igx-icon>
             <span class="igx-group-label__column-name">
-            {{ groupRow.expression ? groupRow.expression.fieldName : '' }}:
+            {{ groupRow.column && groupRow.column.header ?
+                groupRow.column.header :
+                (groupRow.expression ? groupRow.expression.fieldName : '') }}:
             </span>
 
             <ng-container *ngIf="dataType === 'boolean' || dataType === 'string'; else default" >

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

@@ -205,7 +205,7 @@ export class IgxGridGroupByRowComponent {
      * @hidden
      */
     get dataType(): any {
-        const column = this.grid.getColumnByName(this.groupRow.expression.fieldName);
+        const column = this.groupRow.column;
         return (column && column.dataType) || DataType.String;
     }
 }