Calculate the totale value of grouped by rows in angular Infragistics Ui grid

Question

I'm using angular Infragistics UI grid in typescript 12

And I'm trying to calculate the totale of the price field when the grid is in group by mode. Say I have 2 groups by client, group 1 contained 2 items and group 2 contained 3 items. I have to get the total price by each grouped client (for example 300 for group1 and 800 for the second).

Here is my code in HTML component

<igx-grid #grid id="grid" [data]="listeinvoices" [groupingExpressions]='expr' [allowFiltering]="true"  [autoGenerate]="false" height="500px">

  <igx-column  field="client" header="client" [groupable]="true"></igx-column>
  <igx-column  field="price" header="price" [groupable]="true"></igx-column>

  <igx-column  field="invoicenumber" header="invoice nb" [groupable]="true"></igx-column>
</igx-grid>

The code of ts component :

export class FactureComponent implements OnInit {

public expr: ISortingExpression[];

  @ViewChild("grid") public grid!: IgxGridComponent;


  constructor(private rest: RestService,private toastr: ToastrService,private excelExportService: IgxExcelExporterService) 
  {
    this.expr = [
      { dir: SortingDirection.Asc, fieldName: 'client', ignoreCase: false,
        strategy: DefaultSortingStrategy.instance() },
      
      ];
    }
}

Answer 1

You can use Summaries with the GroupBy feature. Now that you've set groupable to the columns that you want to group, just go ahead and set [hasSummary]="true" to the Price column.

This will show you all Summary information for the Price column - like count, min, max, sum and avg. In your case you want to show only Total (sum), so my suggestion would be to create a custom summary:

class TotalSummary {

    public operate(data?: any[]): IgxSummaryResult[] {
        const result = [];
        result.push({
            key: 'sum',
            label: 'Total',
            summaryResult: IgxNumberSummaryOperand.sum(data)
        });
        return result;
    }
}


public totalSummary = TotalSummary;

Template:

<igx-column field="Price" header="Price" dataType="number" [groupable]="true" [hasSummary]="true" [summaries]="totalSummary">

Further more, if you want to show the Summaries only on childLeve (within the grouped level) you can use the summaryCalculationMode

For more information, check out the section of Summaries with GroupBy and Custom Grid Summaries

Answer 2

In that case you can use the Group Row template and structure it as you wish. Check out the documentation, I believe you will find it helpful:

<ng-template igxGroupByRow let-groupRow>
    <div>
        <span>
        {{ groupRow.expression.fieldName }}:
        </span>
        <span>{{ isDate(groupRow.value) ? formatDate(groupRow.value) : groupRow.value }}</span>
        <igx-badge [value]="groupRow.records.length"></igx-badge>
        <span> Ordered in 2017:</span><span>{{ calc2017(groupRow.records)}}</span>
    </div>
</ng-template>

public calc2017(values: any[]) {
   const startDate = new Date('1/1/2017');
   const endDate = new Date('12/31/2017');

   return values.filter((x) => x.OrderDate >= startDate && x.OrderDate <= endDate).length;
}

You can define your own Row Selector template as well

<ng-template igxGroupByRowSelector let-groupByRowContext>
    {{ groupByRowContext.selectedCount }} / {{ groupByRowContext.totalCount  }}
</ng-template>