Skip to content

Added new kb article grid-footer-template-top-grid #2502

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 8, 2024
Merged

Added new kb article grid-footer-template-top-grid #2502

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69df931
Added new kb article grid-footer-template-top-grid
Nov 7, 2024
184ee59
kb(grid): apply fixes as per comments
xristianstefanov Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 104 additions & 0 deletions knowledge-base/grid-footer-template-top-grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
---
title: Footer Template at the Top of the Grid
description: Learn how to position the FooterTemplate of the Telerik Blazor Grid to appear at the top of the grid.
type: how-to
page_title: How to Relocate the FooterTemplate to the Top in Telerik Blazor Grid
slug: grid-footer-template-top-grid
tags: grid, blazor, footer, template, css, styling, top
res_type: kb
ticketid: 1668460
---

## Environment

<table>
<tbody>
<tr>
<td>Product</td>
<td>Grid for Blazor</td>
</tr>
</tbody>
</table>

## 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.

````RAZOR
<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](https://docs.telerik.com/blazor-ui/components/grid/overview)
- [Grid Footer Template](https://docs.telerik.com/blazor-ui/components/grid/templates/column-footer)
Loading