Group and Caption Aggregate

21 Dec 20222 minutes to read

Group and caption aggregate values are calculated from the current group items.
If groupFooterTemplate is provided, the aggregate values are displayed in the group footer cells; and if groupCaptionTemplate is provided, aggregate values are displayed in the group caption cells.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowGrouping="true" allowPaging="true">
    <e-grid-aggregates>
        <e-grid-aggregate>
            <e-aggregate-columns>
                <e-aggregate-column field="UnitsInStock" type="Sum" groupFooterTemplate="Total units: ${Sum}"></e-aggregate-column>
                <e-aggregate-column field="Discontinued" type="Truecount" groupFooterTemplate="Discontinued: ${Truecount}"></e-aggregate-column>
                <e-aggregate-column field="UnitsInStock" type="Max" groupCaptionTemplate="Maximum: ${Max}"></e-aggregate-column>
            </e-aggregate-columns>
        </e-grid-aggregate>
    </e-grid-aggregates>
    <e-grid-groupsettings columns="@(new string[] { "CategoryName" })"></e-grid-groupsettings>
    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="CategoryName" headerText="Category Name" width="160"></e-grid-column>
        <e-grid-column field="ProductName" headerText="Product Name" width="170"></e-grid-column>
        <e-grid-column field="QuantityPerUnit" headerText="Quantity Per Unit" textAlign="Right" width="170"></e-grid-column>
        <e-grid-column field="UnitsInStock" headerText="Units In Stock" width="170"></e-grid-column>
        <e-grid-column field="Discontinued" headerText="Discontinued" displayAsCheckBox="true" type="boolean" textAlign="Center" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Order = Product.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

NOTE

The aggregate values must be accessed inside the template using their corresponding type name.