Telerik Extensions for ASP.NET MVC

This help topic explains how to use aggregates with Telerik Grid for ASP.NET MVC

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Aggregates Introduction

Telerik Grid for ASP.NET MVC supports the following aggregate functions:

  • Average
  • Count
  • Max
  • Min
  • Sum

Aggregates are specified for bound columns and are displayed via the various templates (group header, group footer or grid footer).

Here is an example:
CopyDefining column aggregates
<% Html.Telerik().Grid<Product>(Model)
       .Name("Grid")
       .Columns(columns =>
       {
               columns.Bound(p => p.ProductName);

               columns.Bound(p => p.UnitPrice)
                   .Width(200)
                   .Aggregate(aggreages => aggreages.Sum()) // <-- Sum aggregate
                   .Format("{0:c}")
                   .FooterTemplate(result =>
                   {
                        %>Total Sum: <%= result.Sum.Format("{0:c}") %><% //<-- grid footer template
                   });
       })
       .Render();
%>

This will display the Sum of all records' UnitPrice in the footer of the grid:

Unit Price
Important
The aggregate result will only be displayed if the appropriate template is configured. The grid will not display aggregate results by default.
If using ajax binding you can use ClientFooterTemplate:
CopySpecifying Client Footer Template
<%= Html.Telerik().Grid<Product>(Model)
       .Name("Grid")
       .Columns(columns =>
       {
               columns.Bound(p => p.ProductName);

               columns.Bound(p => p.UnitPrice)
                   .Width(200)
                   .Aggregate(aggreages => aggreages.Sum()) // <-- Sum aggregate
                   .Format("{0:c}")
                   .ClientFooterTemplate("Total Sum :<#= $.telerik.formatString('{0:c}', Sum) #>");
       })
%>
You can use the following arguments when defining the ClientFooterTemplate:
FieldDescriptionExample
AverageThe result of the Average aggregate (available only if specified in column definition)ClientFooterTemplate("Average: <#= Average #>");
CountThe result of the Count aggregate (available only if specified in column definition)ClientFooterTemplate("Count: <#= Count #>");
MaxThe result of the Max aggregate (available only if specified in column definition)ClientFooterTemplate("Max: <#= Max #>");
MinThe result of the Min aggregate (available only if specified in column definition)ClientFooterTemplate("Min: <#= Min #>");
SumThe result of the Sum aggregate (available only if specified in column definition)ClientFooterTemplate("Sum: <#= Sum #>");

Displaying Aggregate Results in the Group Header

You can use the GroupHeaderTemplate to display column aggregates during grouping. Here is an example:
CopySpecifying Group Header Template
<% Html.Telerik().Grid<Product>(Model)
       .Name("Grid")
       .Columns(columns =>
       {
          columns.Bound(o => o.ProductName);
          columns.Bound(o => o.UnitsInStock)
               .Width(100)
               .Aggregate(aggregates => aggregates.Count()) // <-- define the aggregate(s)
               .GroupHeaderTemplate(result =>
               {
                    %><%= result.Title%>: <%= result.Key %> (Count: <%= result.Count %>)<% // <-- customize the group header template
               });
      })
      .Pageable()
      .Groupable(settings => settings.Groups(groups => groups.Add(o => o.UnitsInStock)).Visible(false)) //<-- group by "UnitsInStock"
      .Render();
%>
Group Header Template

If using ajax binding you can use ClientGroupHeaderTemplate:

CopySpecifying Client Group Header Template
<%= Html.Telerik().Grid<Product>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.ProductName);

            columns.Bound(o => o.UnitsInStock)
                   .Width(100)
                   .Aggregate(aggregates => aggregates.Count())
                   .ClientGroupHeaderTemplate("<#= Title #>: <#= Key #> (Count: <#= Count #>)"); // <-- customize the client groop header template
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("AggregatesAjax_Select", "Grid"))
        .Pageable()
        .Groupable(settings => settings.Groups(groups => groups.Add(o => o.UnitsInStock)).Visible(false))
%>
You can use the following arguments when defining the ClientGroupHeaderTemplate:
FieldDescriptionExample
AverageThe result of the Average aggregate (available only if specified in column definition)ClientGroupHeaderTemplate("Average: <#= Average #>");
CountThe result of the Count aggregate (available only if specified in column definition)ClientGroupHeaderTemplate("Count: <#= Count #>");
KeyThe group key valueClientGroupHeaderTemplate("<#= Key #>");
MaxThe result of the Max aggregate (available only if specified in column definition)ClientGroupHeaderTemplate("Max: <#= Max #>");
MinThe result of the Min aggregate (available only if specified in column definition)ClientGroupHeaderTemplate("Min: <#= Min #>");
SumThe result of the Sum aggregate (available only if specified in column definition)ClientGroupHeaderTemplate("Sum: <#= Sum #>");
TitleThe title of the grouped column (if any) or the memberClientGroupHeaderTemplate("<#= Title #>");
Important
The group header template is displayed only if the grid is grouped by the same field to which the column is bound.

Displaying Aggregate Results in the Group Footer

You can use the GroupFooterTemplate to display column aggregates during grouping. Here is an example:
CopySpecifying Group Footer Template
<% Html.Telerik().Grid<Product>(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.ProductName)
                   .Aggregate(aggregates => aggregates.Count()) // <-- define the aggregates
                   .GroupFooterTemplate(result =>               // <-- customize the group footer template
                   {
                        %>Count: <%= result.Count %><%     
                   });

            columns.Bound(o => o.UnitPrice)
                   .Width(200)
                   .Aggregate(aggreages => aggreages.Sum()) // <-- define the aggregates
                   .GroupFooterTemplate(result =>           // <-- customize the group footer template
                   {
                        %>Sum: <%= result.Sum.Format("{0:c}") %><%
                   });
        })
        .Pageable()
        .Groupable(settings => settings.Groups(groups => groups.Add(o => o.UnitsInStock)).Visible(false))
        .Render();
%>
Group Footer Template

If using ajax binding you can use ClientGroupFooterTemplate:

CopySpecifying Client Group Footer Template
<%= Html.Telerik().Grid<Product>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.ProductName);

            columns.Bound(o => o.UnitsInStock)
                   .Width(100)
                   .Aggregate(aggregates => aggregates.Count())
                   .ClientGroupFooterTemplate("Count: <#= Count #>"); // <-- customize the client groop footer template
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("AggregatesAjax_Select", "Grid"))
        .Pageable()
        .Groupable(settings => settings.Groups(groups => groups.Add(o => o.UnitsInStock)).Visible(false))
%>
You can use the following arguments when defining the ClientGroupFooterTemplate:
FieldDescriptionExample
AverageThe result of the Average aggregate (available only if specified in column definition)ClientGroupFooterTemplate("Average: <#= Average #>");
CountThe result of the Count aggregate (available only if specified in column definition)ClientGroupFooterTemplate("Count: <#= Count #>");
MaxThe result of the Max aggregate (available only if specified in column definition)ClientGroupFooterTemplate("Max: <#= Max #>");
MinThe result of the Min aggregate (available only if specified in column definition)ClientGroupFooterTemplate("Min: <#= Min #>");
SumThe result of the Sum aggregate (available only if specified in column definition)ClientGroupFooterTemplate("Sum: <#= Sum #>");

See Also

Other Resources