blazor-docs/knowledge-base/grid-footer-template-top-grid.md

title	description	type	page_title	slug	tags	res_type	ticketid
Footer Template at the Top of the Grid	Learn how to position the FooterTemplate of the Telerik Blazor Grid to appear at the top of the grid.	how-to	How to Relocate the FooterTemplate to the Top in Telerik Blazor Grid	grid-footer-template-top-grid	grid, blazor, footer, template, css, styling, top	kb	1668460

Environment

Product

Grid for Blazor

Description

This KB article answers the following questions:

• How to move the Footer Template to the top of the Grid?
• How can I display the aggregate results at the top of the Grid in Blazor?

Solution

To reposition the FooterTemplate to appear at the top of the Grid, apply custom CSS for positioning. This involves using CSS to position the footer at the top of the grid and adding padding to the grid header to accommodate the footer's new position.

<style>
    .k-grid .k-grid-footer {
        position: absolute;
        border-bottom-width: 1px;
        border-bottom-color: rgba(0, 0, 0, 0.08);
    }

    .k-grid .k-grid-header {
        padding-top: 60px;
    }
</style>

<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>
                @{
                    int? headCount = (int?)context?.AggregateResults
                    .FirstOrDefault(r => r.AggregateMethodName == "Count" && r.Member == nameof(Employee.EmployeeId))?.Value;
                }
                Total employees: @headCount
            </FooterTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private 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; }
    }
}

See Also

• Grid Overview
• Grid Footer Template