fix(group-by): Expose the column in IGroupByRecord #6939

Author: dkamburov

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.getColumnByName(expressions[level].fieldName);
             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

@@ -2690,9 +2690,9 @@ 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.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;
     }
 }