1. Home
  2. Forum
  3. React - EJ 2
  4. Remove "Total .." from Pivot table column Headers

Remove "Total .." from Pivot table column Headers

We have updated to the last version of the pivot table, and the columns always show the caption of the column, but it adds "Total of.."


Is there a way to remove this? I only need the Caption I have already defined.



10 Replies 1 reply marked as answer
MM Manikandan Murugesan Syncfusion Team December 9, 2021 10:04 AM UTC

Hi Gonzalo, 
 
We have modified the current behavior of displaying values headers text based on Microsoft Excel standards. And it affects when the value fields bound either in column or row axis alone. But you can be able to customize the grand total and value headers text in the “headerCellInfo” and “queryCellInfo” events. Please refer the following code example. 
 
Code Example: 
          <PivotViewComponent 
            gridSettings={{ 
              queryCellInfo: this.queryCellInfo.bind(this), 
              headerCellInfo: this.headerCellInfo.bind(this), 
            }} 
          > 
          </PivotViewComponent>   
 
 
queryCellInfo(args) { 
    if ( 
      this.pivotObj && 
      this.pivotObj.dataSourceSettings.rows.length === 0 && 
      this.pivotObj.dataSourceSettings.valueAxis === 'row' 
    ) { 
      var colIndex = args.cell.getAttribute('aria-colindex'); 
      if ( 
        args.data && 
        args.data[colIndex] && 
        args.data[colIndex].axis === 'row' 
      ) { 
        args.cell.querySelector('.e-cellvalue').innerText = 
          args.data[colIndex].formattedText; 
      } 
    } 
  } 
  headerCellInfo(args) { 
    if ( 
      this.pivotObj && 
      this.pivotObj.dataSourceSettings.columns.length === 0 && 
      this.pivotObj.dataSourceSettings.valueAxis === 'column' 
    ) { 
      args.node.querySelector('.e-headercelldiv .e-headertext').innerText = 
        args.cell.column.headerText; 
    } 
  } 
 
Meanwhile, we have prepared a sample for your reference. Please find it from below link. 
 
 
Please let us know if you have any concerns. 
 
Regards, 
Manikandan 


Marked as answer
GU GUU December 9, 2021 11:58 PM UTC

Thnks it workedf


MM Manikandan Murugesan Syncfusion Team December 10, 2021 04:48 AM UTC

Hi Gonzalo, 
   
Please let us know if you have any other queries. We are always happy to assist you.  
   
Regards,  
Manikandan 


DB Deepak Bisht replied to Manikandan Murugesan November 13, 2024 10:06 AM UTC

Hi Synkfusion team,


I am also facing same issue in angular version 13 and ej2-angular-pivotview version: "^19.4.55",

I only need the Caption I have already defined. i tried the above suggestion (converted react code to angular ) but did not worked for me.

Image_7848_1731492085177


SK Sridhar Karunakaran Syncfusion Team November 14, 2024 08:05 AM UTC

Hi Deepak,


We would like to inform you that the current default behavior of the Pivot Table, starting from version 19.3.47, is as follows: If there are no fields assigned to the "columns" axis, the columns will only display the grand total of the values from the fields assigned to the values axis. Additionally, the header text will be formatted as "Total" + Aggregation type + "of" + value field caption to indicate that these columns represent grand totals. However, you can customize these value headers using the "headerCellInfo" event. In the following code example, we have removed the word "Total" from the headers as per the requirement.


Code example:

enginePopulated(): void {

    // Bind the headerCellInfo event here.

    this.pivotObj.grid.headerCellInfo = this.headerCell.bind(this);

  }

 

  headerCell(args: any): void {

    if (this.pivotObj && (this.pivotObj as any).dataSourceSettings.columns.length === 0 &&

      this.pivotObj.dataSourceSettings.valueAxis === 'column' && args.cell.column.index != 0) {

      // customize the column header text here.

      args.node.querySelector('.e-headertext').innerText = args.cell.column.headerText

    }

  }

 


Output screenshot:


In the meantime, we have prepared an Angular 13 sample with version 19.4.55 for your reference. You can find the attached sample below.

Furthermore, you can refer to the user guide documentation for more information about the headerCellInfo event and customizing headers in a Pivot Table.

Documentation: https://ej2.syncfusion.com/angular /documentation/pivotview/row-and-column#headercellinfo

KB: https://support.syncfusion.com/kb/article/14881/how-to-customize-headers-in-the-javascript-pivot-table-ui-and-during-the-exporting-process


Please let us know if you have any concerns.


Regards,

Sridhar Karunakaran.


Attachment: Sample_29b45446.zip

DB Deepak Bisht November 16, 2024 10:29 AM UTC

Hi  Sridhar,

After using this code it's working fine now. Thanks  


DB Deepak Bisht November 18, 2024 05:52 AM UTC

Hi Synkfusion team,

I am facing issue in pivot table rows, in which if there is any Punctuation marks(".", ",") in the string, then not able to expand the row field and the "hover" tooltip is also not working for the case, and give some error in the console.


For Reference below is the Error:


core.mjs:7739 ERROR TypeError: Cannot read properties of undefined (reading 'index')

    at PivotViewComponent.getRowText (ej2-pivotview.es2015.js:24200:1)

    at PivotViewComponent.setToolTip (ej2-pivotview.es2015.js:24114:1)

    at Observer.notify (ej2-base.es2015.js:2325:29)

    at Tooltip.trigger (ej2-base.es2015.js:5164:43)

    at Tooltip.showTooltip (ej2-popups.es2015.js:4149:1)

    at Tooltip.targetHover (ej2-popups.es2015.js:4123:1)

    at _ZoneDelegate.invokeTask (zone.js:406:1)

    at Object.onInvokeTask (core.mjs:25681:1)

    at _ZoneDelegate.invokeTask (zone.js:405:1)

    at Zone.runTask (zone.js:178:1)

documentation URL - https://stackblitz.com/edit/github-wj2qzn?file=src%2Fapp.component.ts,src%2Fdatasource.ts

Image_5826_1731908993400

Case - change "Canada" to " Canada." then
1 -  Canada. section not working properly.
2 


SK Sridhar Karunakaran Syncfusion Team November 18, 2024 01:59 PM UTC

Hi Deepak,


We would like to inform you that we used a dot (.) as the default separator to identify header levels in our pivot table, which is causing the issues on your end. To resolve this, use the headerDelimiter property in the valueSortSettings option to change the default separator to any delimiter string. Please refer to the code example below.


Code example:

this.dataSourceSettings = {

  valueSortSettings: { headerDelimiter: '##' },

};

 


Output screenshot:

Image_8116_1731938174950

Meanwhile, we have modified the provided sample for your reference. You can access the sample at the following link.

Sample: https://stackblitz.com/edit/github-wj2qzn-3geant?file=src%2Fapp.component.ts


Additionally, we have documented a Knowledge Base (KB) article on 'How to Expand a Header Containing a Dot (.) Character'. Please refer to the KB article below.

KB: https://support.syncfusion.com/kb/article/14444/how-to-expand-a-header-that-contains-a-dot-character


Please let us know if you have any concerns.


Regards,

Sridhar Karunakaran.


DB Deepak Bisht December 3, 2024 06:11 AM UTC

Hi Syncfusion team,

I updated my Syncfusion Angular version from 19 to 20, and I encountered an issue with my pivot charts. When I inspect the browser and scroll up and down, some errors are displayed in the console.

Image_1461_1733206159483


SK Sridhar Karunakaran Syncfusion Team December 4, 2024 03:22 PM UTC

Hi Deepak,


We believe that you are experiencing an exception while rendering the pivot chart. If this is the case, we have checked the reported issue with the pivot table version (20.4.47) but were unable to replicate it on our end. For your reference, we have attached a sample that we tested below.


Output screenshot:

However, if the problem persists, please reproduce it using the samples provided and let us know, or share the exact Syncfusion version of the pivot table you are using. This will help us investigate the reported problem on our side and offer a solution as quickly as possible.


Regards,
Sridhar Karunakaran


Attachment: Sample_7e0abc0a.zip

Loader.
Up arrow icon