Column Footer Template

You can display a grand total row at the bottom of the grid through the FooterTemplate of each bound column.

You can use aggregates for the current field directly from the context, and its AggregateResults field lets you get aggregates for other fields that you have defined through their field name and aggregate function.

Footer Template with grand total data

@* grand total footer that is always visible *@

<TelerikGrid Data=@GridData Pageable="true" Height="300px">
    <GridAggregates>
        <GridAggregate Field=@nameof(Employee.Salary) Aggregate="@GridAggregateType.Max" />
        <GridAggregate Field=@nameof(Employee.Salary) Aggregate="@GridAggregateType.Sum" />
        <GridAggregate Field=@nameof(Employee.EmployeeId) Aggregate="@GridAggregateType.Count" />
    </GridAggregates>
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Salary) Title="Salary">
            <FooterTemplate>
                Total salaries: @context.Sum?.ToString("C0")
                <br />
                Highest salary: @context.Max?.ToString("C0")
            </FooterTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(Employee.Name)>
            <FooterTemplate>
                @{
                    // 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 or int for the count of IDs
                    // Casts are towards nullable types to avoid errors when filering removes all items and aggregation
                    int? headCount = (int?)context?.AggregateResults
                        .FirstOrDefault(r => r.AggregateMethodName == "Count" && r.Member == nameof(Employee.EmployeeId))?.Value;
                }
                Total employees: @headCount
            </FooterTemplate>
        </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(),
                Salary = rnd.Next(1000, 5000),
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public decimal Salary { get; set; }
    }
}

The result from the code snippet above

Using Components in Grid Column Footer Templates

See specifics and example in this knowledge base article: Using Components in Grid Templates.

Notes

Footer templates usually display aggregates. Here are some things to keep in mind.

• Aggregate results are based on all the data across all pages.
• Aggregate results are calculated over filtered data only.
• Footer Templates are not available for the GridCheckboxColumn and the GridCommandColumn.

See Also

• Live Demo: Grid Footer Template
• Blazor Grid