Grid Aggregates
The Grid component provides built-in aggregates for column values based on grouping and also a grand total row.
In this article:
Available Aggregate Functions
There are several available aggregate functions under the Telerik.Blazor.GridAggregateType enum:
AverageCountMaxMinSum
The Count aggregate can be applied to any type of field. The other aggregates can only be applied to numerical fields (e.g., int, decimal, double, etc.).
Where You Can Use Aggregates
You can use aggregates in the following templates:
-
GroupFooterTemplateof aGridColumn- a footer in the respective column that renders when the grid is grouped. -
GroupHeaderTemplateof aGridColumn- a header in the respective column that renders when the grid is grouped by that column. TheValuefield in the context carries the current group value. -
FooterTemplateof aGridColumn- a grand total row of footers for the entire grid.
How to Enable Aggregates
To enable aggregates:
- Under the
GridAggregatestag, define theGridAggregateentries to enable the aggregations per field you want to use. - If the Grid is bound to a dynamic object (Expando), set the
FieldTypeattribute of theGridAggregatetag (it is of typeType). - Use the aggregate result in the templates that support it - their
contextis strongly typed and carries the aggregate values in the respective fields. - Set the grid's
Groupableproperty totrue.- If you will be using only
FooterTemplates - grouping is not required.
- If you will be using only
- Group the grid to see the effect on group-specific templates
Example
Use Aggregates in the Telerik Blazor Grid
Enable and use aggregates. To see the full effect, group by a column - "Team" and then "Active Projects".
<TelerikGrid Data=@GridData Groupable="true" Pageable="true" Height="700px">
<GridAggregates>
<GridAggregate Field=@nameof(Employee.Name) Aggregate="@GridAggregateType.Count" />
<GridAggregate Field=@nameof(Employee.Team) Aggregate="@GridAggregateType.Count" />
<GridAggregate Field=@nameof(Employee.Salary) Aggregate="@GridAggregateType.Max" />
<GridAggregate Field=@nameof(Employee.Salary) Aggregate="@GridAggregateType.Sum" />
</GridAggregates>
<GridColumns>
<GridColumn Field=@nameof(Employee.Name) Groupable="false">
<FooterTemplate>
Total: @context.Count employees.
<br />
@{
// you can use aggregates for other fields/columns by extracting the desired one by its
// field name and aggregate function from the AggregateResults collection
// The type of its Value is determined by the type of its field - decimal for the Salary field here
decimal salaries = (decimal)context.AggregateResults
.FirstOrDefault(r => r.AggregateMethodName == "Sum" && r.Member == "Salary")?.Value;
}
Total salaries: @salaries.ToString("C0")
</FooterTemplate>
</GridColumn>
<GridColumn Field=@nameof(Employee.Team) Title="Team">
<GroupFooterTemplate>
Team Members: <strong>@context.Count</strong>
</GroupFooterTemplate>
<GroupHeaderTemplate>
@context.Value @* the default text you would get without the template *@
<span>Team size: @context.Count</span>
</GroupHeaderTemplate>
</GridColumn>
<GridColumn Field=@nameof(Employee.Salary) Title="Salary" Groupable="false">
<GroupFooterTemplate>
@* you can use a group footer for non-groupable columns as well *@
Total salaries: @context.Sum
<br />
<span style="color: red;">Highest: @context.Max</span>
</GroupFooterTemplate>
</GridColumn>
<GridColumn Field=@nameof(Employee.ActiveProjects) Title="Active Projects">
<GroupHeaderTemplate>
@{
<span>Currently active projects: @context.Value </span>
//sample of conditional logic in the group header
if ((int)context.Value > 3) // in a real case, you may want to ensure type safety and add defensive checks
{
<strong style="color: red;">These people work on too many projects</strong>
}
}
</GroupHeaderTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public List<Employee> GridData { get; set; }
protected override void OnInitialized()
{
GridData = new List<Employee>();
var rand = new Random();
for (int i = 0; i < 15; i++)
{
Random rnd = new Random();
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3,
Salary = rnd.Next(1000, 5000),
ActiveProjects = i % 4 == 0 ? 2 : 5
});
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public decimal Salary { get; set; }
public int ActiveProjects { get; set; }
}
}
The result of the code snippet above after the grid has been grouped by the Team and Active Projects columns
Notes
You should define only aggregates that you will use to avoid unnecessary calculations that may be noticeable on large data sets.
If you try to use an aggregate that is not defined, or an aggregate over an unsupported field type, a runtime error will be thrown.
If you update a field of a model the
Datacollection in the view-model, aggregates will not be updated automatically - the grid needs to re-evaluate that data first, and since this is an expensive operation a UI render does not trigger it. You can update the data collection yourself, or fetching it anew from the service (example here, see how the Create/Update/Delete events fetch data anew).If you bind the Grid via
OnReadevent, make sure to setAggregateResultsin theGridReadEventArgsevent argument object. Otherwise the Grid will calculate aggregates from the data on the current page only.
private async Task OnGridRead(GridReadEventArgs args)
{
DataSourceResult result = AllGridData.ToDataSourceResult(args.Request);
args.Data = result.Data;
args.Total = result.Total;
args.AggregateResults = result.AggregateResults;
}