Add custom aggregation type to the menu in EJ2 TypeScript Pivotview control

8 Aug 20236 minutes to read

By using the dataBound event, you can add your own custom aggregate type(s) to the pivot table’s aggregate menu.

In the following example, we have added the aggregation types CustomAggregateType 1 and CustomAggregateType 2 to the aggregate menu. The calculation for those aggregated types can be done using the aggregateCellInfo event.

import { PivotView, FieldList, IDataSet, AggregateTypes } from '@syncfusion/ej2-pivotview';
import { L10n } from '@syncfusion/ej2-base';
import { pivotData } from './datasource.ts';

PivotView.Inject(FieldList);
L10n.load({
     'en-US': {
          pivotview: {
               CustomAggregateType1: 'Custom Aggregate Type 1',
               CustomAggregateType2: 'Custom Aggregate Type 2',
          },
          pivotfieldlist: {
               CustomAggregateType1: 'Custom Aggregate Type 1',
               CustomAggregateType2: 'Custom Aggregate Type 2',
          }
     }
});
const SummaryType: string[] = [
     'Sum',
     'Count',
     'DistinctCount',
     'Avg',
     'CustomAggregateType1',
     'CustomAggregateType2'
];
let pivotObj: PivotView = new PivotView({
     dataSourceSettings: {
          expandAll: false,
          dataSource: pivotData as IDataSet[],
          columns: [{ name: 'Year' }, { name: 'Quarter' }],
          values: [{ name: 'Sold' }, { name: 'Amount' }],
          rows: [{ name: 'Country' }, { name: 'Products' }],
          formatSettings: [{ name: 'Amount', format: 'C0' }],
          subTotalsPosition: 'Bottom'
     },
     width: '100%',
     height: 300,
     showFieldList: true,
     dataBound: function () {
          pivotObj.getAllSummaryType = function () {
               return SummaryType as AggregateTypes[];
          };
          pivotObj.pivotFieldListModule.aggregateTypes = SummaryType as AggregateTypes[];
          pivotObj.pivotFieldListModule.getAllSummaryType = function () {
               return SummaryType as AggregateTypes[];
          };
     },
     aggregateCellInfo(args) {
          if (args.aggregateType === 'CustomAggregateType1') {
               args.value = args.value * 100;
          }
          if (args.aggregateType === 'CustomAggregateType2') {
               args.value = args.value / 100;
          }
     }
});
pivotObj.appendTo('#PivotTable');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-pivotview/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>