Show/Hide Grid aggregates

Environment

Product	Grid
Progress Telerik UI for ASP.NET Core version	Created with the 2022.2.621 version

Description

How to show and hide the aggregates in the Telerik UI for ASP.NET Core Grid?

Solution

1. Hook up for the event that, when triggered, should toggle the aggregates. (In the example is used the Change event of the Switch component)
2. Based on a condition show/hide the aggregates. To set up the aggregates, you can use the aggregate method of the DataSource. To show/hide the aggregates you can change the value of the template (In the example footerTemplate of the Grid) in which the aggregate values are displayed.

    @(Html.Kendo().Switch()
        .Name("switch")
        .Events(e => e.Change("onChange"))
        .Messages(c => c.Checked("Show Aggregates").Unchecked("Hide Aggregates"))
        .HtmlAttributes(new {style = "width:150px"})
    )

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitsInStock).Width(100);
            columns.Bound(p => p.Discontinued).Width(100);
            columns.Bound(p => p.UnitPrice).Width(100);
        })
        .Pageable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("EditingInline_Read", "Grid"))
        )
    )

    function onChange(e){
        var grid = $("#grid").data("kendoGrid");

        if(e.checked){
            var aggregates = [{ field: "UnitPrice", aggregate: "sum"}];
            grid.dataSource.aggregate(aggregates);
            grid.columns[3].footerTemplate = "Sum: #=data.UnitPrice.sum == 0?'Calculating':data.UnitPrice.sum#";
            grid.setOptions({
                columns: grid.columns
            });
        }
        else{
            grid.columns[3].footerTemplate = "";
            grid.setOptions({
                columns: grid.columns
            });
            grid.dataSource.aggregate([]);
        }
    }

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.