Custom Aggregate

21 Dec 20222 minutes to read

To calculate the aggregate value with your own aggregate functions, use the custom aggregate option. To use custom aggregation, specify the type as Custom, and provide the custom aggregate function in the customAggregate property in e-grid-aggregates tag helper.

The custom aggregate function will be invoked with different arguments for total and group aggregations.

  • Total aggregation: The custom aggregate function will be called with the whole data and current aggregateColumn
    object.
  • Group aggregation: This will be called with the current group details and aggregateColumn object.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true">
    <e-grid-aggregates>
        <e-grid-aggregate>
            <e-aggregate-columns>
                <e-aggregate-column field="ShipCountry" type="Custom" footerTemplate="Brazil Count:${Custom}" customAggregate="@("customAggregateFn")"></e-aggregate-column>
            </e-aggregate-columns>
        </e-grid-aggregate>
    </e-grid-aggregates>
    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="160"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function customAggregateFn(data, aggColumn) {
        return data.result.filter(function (item) {
            return item[aggColumn.columnName] === 'Brazil';
        }).length;
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

NOTE

To access the custom aggregate value inside the template, use the key as Custom.