Add custom aggregation type to the menu in ASP.NET MVC Pivot Table Component

2 Aug 20233 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.

@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("pivotview").Height("300").DataSourceSettings(dataSourceSettings => dataSourceSettings.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).GridSettings(new PivotViewGridSettings { ColumnWidth = 140 }).AggregateCellInfo("aggregateCell").DataBound("dataBound").Render()
<script>
    var SummaryType = [
        'Sum',
        'Count',
        'DistinctCount',
        'Avg',
        'CustomAggregateType1',
        'CustomAggregateType2'
    ];
    var L10n = ej.base.L10n;
    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',
            }
        }
    });
    function dataBound() {
        var pivotObj = document.getElementById('pivotview').ej2_instances[0];
        pivotObj.getAllSummaryType = function () {
            return SummaryType;
        };
        pivotObj.pivotFieldListModule.aggregateTypes = SummaryType;
        pivotObj.pivotFieldListModule.getAllSummaryType = function () {
            return SummaryType;
        };
    }
     function aggregateCell(args){
        if (args.aggregateType === 'CustomAggregateType1') {
            args.value = args.value * 100;
        }
        if (args.aggregateType === 'CustomAggregateType2') {
            args.value = args.value / 100;
        }
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

Add custom aggregation type to the menu