New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Show or Hide Grid Aggregates

Environment

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

Description

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

Solution

Hook up for the event that, when triggered, will toggle the aggregates. The example below uses the Change event of the Switch component.
Show or hide the aggregates based on a condition. To set up the aggregates, you can use the aggregate method of the DataSource. To show or hide the aggregates, you can change the value of the template. The example below uses the footerTemplate of the Grid in which the aggregate values are displayed.

Index.cshtml
    @(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"))
        )
    )
Script.js
    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.

Show or Hide Grid Aggregates

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also