Suggestion for igx-grid group by row template

[punker76]

In igx-grid it's possible to define a formatter for a column. This is then used for the cell display and the filter ui.

But it's not used for the default group by row template.

Here is a simple sample:

• let's say we have a column which is internally a number (enumeration value), starting from 0 = Available to n
• if I use a formatter then it will be shown as expected in cell

• if I now group by this column the template will show not the formatted value, it shows the number value behind
• it's possible to copy the default template and change it to use the formatter

    <ng-template igxGroupByRow let-groupRow>
      <div class="igx-group-label">
        <igx-icon class="igx-group-label__icon">group_work</igx-icon>
        <span class="igx-group-label__column-name">
          {{ groupRow.column && groupRow.column.header ? groupRow.column.header : groupRow.expression ? groupRow.expression.fieldName : "" }}:
        </span>

        <ng-container *ngIf="groupRow.column.formatter; else default">
          <span class="igx-group-label__text">{{ groupRow.column.formatter(groupRow.value) }}</span>
        </ng-container>
        <ng-template #default>
          <ng-container *ngIf="groupRow.column.dataType === 'boolean' || groupRow.column.dataType === 'string'; else defaultPiped">
            <span class="igx-group-label__text">{{ groupRow.value }}</span>
          </ng-container>
        </ng-template>
        <ng-template #defaultPiped>
          <ng-container *ngIf="groupRow.column.dataType === 'number'">
            <span class="igx-group-label__text">{{ groupRow.value | number }}</span>
          </ng-container>
          <ng-container *ngIf="groupRow.column.dataType === 'date' || groupRow.column.dataType === 'dateTime' || groupRow.column.dataType === 'time'">
            <span class="igx-group-label__text">{{
              groupRow.value | date : groupRow.column.pipeArgs.format : groupRow.column.pipeArgs.timezone : locationsGrid.locale
            }}</span>
          </ng-container>
        </ng-template>

        <igx-badge
          [value]="groupRow.records ? groupRow.records.length : 0"
          class="igx-group-label__count-badge"
          style="color: white; padding-left: 4px; padding-right: 4px"
        >
        </igx-badge>
      </div>
    </ng-template>

• my suggestion is now, to add this to the default group by row template

related code:

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

Lines 51 to 62 in 0d21d8a

	<ng-container *ngIf="dataType === 'boolean' || dataType === 'string'; else default">
	<span class="igx-group-label__text">{{ groupRow.value }}</span>
	</ng-container>
	<ng-template #default>
	<ng-container *ngIf="dataType === 'number'">
	<span class="igx-group-label__text">{{ groupRow.value | number }}</span>
	</ng-container>
	<ng-container *ngIf="dataType === 'date' || dataType === 'dateTime' || dataType === 'time'">
	<span class="igx-group-label__text">{{ groupRow.value |
	date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale }}</span>
	</ng-container>
	</ng-template>

changed code:

        <ng-container *ngIf="groupRow.column.formatter; else default">
          <span class="igx-group-label__text">{{ groupRow.column.formatter(groupRow.value) }}</span>
        </ng-container>
        <ng-template #default>
          <ng-container *ngIf="dataType === 'boolean' || dataType === 'string'; else defaultPiped">
            <span class="igx-group-label__text">{{ groupRow.value }}</span>
          </ng-container>
        </ng-template>
        <ng-template #defaultPiped>
          <ng-container *ngIf="dataType === 'number'">
            <span class="igx-group-label__text">{{ groupRow.value | number }}</span>
          </ng-container>
          <ng-container *ngIf="dataType === 'date' || dataType === 'dateTime' || dataType === 'time'">
            <span class="igx-group-label__text">{{
              groupRow.value | date : groupRow.column.pipeArgs.format : groupRow.column.pipeArgs.timezone : locationsGrid.locale
            }}</span>
          </ng-container>
        </ng-template>

result

[ChronosSF]

One thing to consider here is that the cell formatter receives the whole record because often the result depends on values from other columns. With groupby the formatter will execute with say the first record of the group.