Runnig Total

[Giovanni Michielin]

Hello,

I would like to have a running total column in data grid, same as Pivot Table.

Its value should change after sorting and/or  filtering rows. 

Its value should be displayed in a separate column of the source field .

Thanks 

[Dineshnarasimman Muthu]

Hi Giovanni,

Greetings from Syncfusion Support.

We have reviewed your requirement. Based on our understanding, you need to display a separate column in the Grid that shows the sum of values from multiple fields, similar to a Grand Total column. Additionally, you require another column that displays the running total of the calculated Grand Total values.

This can be achieved using Grid column templates. In the sample below, we use four data columns along with two additional template columns:

• Grand Total: Calculates and displays the sum of the specified field values for the current row.
• Running Grand Total: Calculates and displays the cumulative total of the Grand Total values up to the current row.

    <!-- Grand Total -->

    <e-column headerText="Grand Total">

      <ng-template #template let-data>

        {{ getGrandTotal(data) }}

      </ng-template>

    </e-column>

    <!-- Running Grand Total -->

    <e-column headerText="Running Grand Total">

      <ng-template #template let-data>

        {{ getRunningGrandTotal(data) }}

      </ng-template>

    </e-column>

  </e-columns>

 

 

  public getGrandTotal(row: any): number {

    return this.numericColumns.reduce(

      (sum, field) => sum + (+row[field] || 0),

      0

    );

  }

  public getRunningGrandTotal(currentRow: any): number {

    const records = (this.grid?.getCurrentViewRecords() as any[]) || [];

    let runningTotal = 0;

    for (const row of records) {

      const grandTotal = this.getGrandTotal(row);

      runningTotal += grandTotal;

      if (row.OrderID === currentRow.OrderID) {

        break;

      }

    }

    return runningTotal;

  }

 

Image:

 

Sample: https://stackblitz.com/edit/angular-kbmrfkcb?file=src%2Fapp.component.html,src%2Fapp.component.ts

If this does not meet your requirement, kindly provide the following details to help us investigate further:

• Please clarify how you expect the Running Total column to be displayed in the Grid.
• Confirm whether the Running Total field already exists in your datasource or if it needs to be calculated dynamically.
• Provide a detailed explanation of your requirement, including the expected input and output, so that we can better understand your use case and provide an appropriate solution.

We highly appreciate your co-operation in providing these information.

Regards,

Dineshnarasimman M