Add custom aggregation type to the menu in ASP.NET MVC Pivotview component

26 Feb 20264 minutes to read

The ASP.NET MVC Pivot Table component allows you to extend its functionality by adding custom aggregation types to the built-in aggregation menu. This enables you to implement specific calculation methods beyond the standard options like Sum, Average, Min, and Max.

Adding custom aggregation types

You can use the DataBound event to add your own custom aggregate types to the pivot table’s aggregate menu. This event fires after the pivot table has been fully rendered, making it the perfect spot to modify the component’s UI elements.

In the following example, we have added two custom aggregation types CustomAggregateType 1 (which calculates a weighted average) and CustomAggregateType 2 (which calculates the percentage of total) to the aggregate menu.

CSHTML

@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>

CustomAggregation.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}