Custom Grand total row in Pivotview

[Dipesh Nayak]

Is it possible to turn off component calculated Grand total and insert custom grand total row?It is required when we are showing limited records but wanted to show the grand total for all records.

[Sivamathi Natarajan]

Hi Dipesh, 

Thanks for contacting Syncfusion support. 

 

The Pivot Table component doesn’t have a pre-defined option to set the custom grand totals. And the option isn’t applicable with the component behavior. But, it can be achieved by below work around codes where the grand totals can be customized before it renders in table. 

 

Code Example: 

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings width='100%' height='300' 

        (enginePopulated)='enginePopulated($event)' showFieldList='true' > 

    </ejs-pivotview> 

 

public columnGrandTotalIndex; 

public rowGrandTotalIndex; 

 

  queryCell(args: any): void { 

     (this.pivotGridObj.renderModule as any).rowCellBoundEvent(args); 

    if (this.pivotGridObj.pivotValues[0]) { 

      for (var i = 0; i < this.pivotGridObj.pivotValues[0].length; i++) { 

        if (this.columnGrandTotalIndex == undefined && this.pivotGridObj.pivotValues[0][i] && (((this.pivotGridObj.pivotValues[0][i] as IAxisSet).type as String === "grand sum") || ((this.pivotGridObj.pivotValues[0][i] as IAxisSet).valueSort && ((this.pivotGridObj.pivotValues[0][i] as IAxisSet).valueSort.levelName as String).includes("Grand Total")))) { 

          this.columnGrandTotalIndex = i; 

        } 

      } 

     for (var i = 0; i < this.pivotGridObj.pivotValues.length; i++) { 

       if (this.rowGrandTotalIndex == undefined && this.pivotGridObj.pivotValues[i][0] && (this.pivotGridObj.pivotValues[i][0] as IAxisSet).type as String === "grand sum") { 

         this.rowGrandTotalIndex = i; 

       } 

     } 

 

      if (args.cell.innerText != "Grand Total") { 

        // To customize column grand totals 

        if (args.data[args.cell.getAttribute("aria-colindex")].colIndex >= this.columnGrandTotalIndex) { 

          args.cell.innerText = "0"; 

        } 

        // To customize row grand totals 

        if (args.data[args.cell.getAttribute("aria-colindex")].rowIndex >= this.rowGrandTotalIndex) { 

          args.cell.innerText = "1"; 

        } 

      } 

    } 

    this.columnGrandTotalIndex = undefined; 

     this.rowGrandTotalIndex = undefined; 

  } 

 

  enginePopulated(args: any): void { 

     this.pivotGridObj.grid.queryCellInfo = this.queryCell.bind(this); 

  } 

 

 

Please check the below screenshot. Here we have customize the column grand total to display as 0 and row grand total to display as 1. 

 

 

Meanwhile, we have prepared a sample for your reference. Kindly check the below sample link. 

 

Sample Link: https://stackblitz.com/edit/angular-ngeijz-c7r3j4?file=app.component.ts 

 

We hope that the above sample meets your requirement. 

 

Regards, 

Sivamathi. 

[Dipesh Nayak]

Thank you Sivamathi,the solution you have provided worked like a charm.I have one additional query, Can we freeze the grand total row ,so that we dont have to scroll down to view the grand total?

[Sivamathi Natarajan]

Hi Dipesh, 

 

We regret you to let you know that the mentioned requirement isn’t available in pivot table component. And it isn’t applicable with the component behavior. 

 

Regards, 

Sivamathi.