From 69df931ad88524690bf82376b1902c03c6a3d8dd Mon Sep 17 00:00:00 2001 From: KB Bot Date: Thu, 7 Nov 2024 15:24:32 +0000 Subject: [PATCH 1/2] Added new kb article grid-footer-template-top-grid --- .../grid-footer-template-top-grid.md | 102 ++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 knowledge-base/grid-footer-template-top-grid.md diff --git a/knowledge-base/grid-footer-template-top-grid.md b/knowledge-base/grid-footer-template-top-grid.md new file mode 100644 index 0000000000..b537324815 --- /dev/null +++ b/knowledge-base/grid-footer-template-top-grid.md @@ -0,0 +1,102 @@ +--- +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 + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +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 + + + + + + + + + + + + Total salaries: @context.Sum?.ToString("C0") +
+ Highest salary: @context.Max?.ToString("C0") +
+
+ + + @{ + int? headCount = (int?)context?.AggregateResults + .FirstOrDefault(r => r.AggregateMethodName == "Count" && r.Member == nameof(Employee.EmployeeId))?.Value; + } + Total employees: @headCount + + +
+
+ +@code { + private List GridData { get; set; } + + protected override void OnInitialized() + { + GridData = new List(); + 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) From 184ee59f815a789a66eca4890e0e2f23394daa8f Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Fri, 8 Nov 2024 15:14:19 +0200 Subject: [PATCH 2/2] kb(grid): apply fixes as per comments --- knowledge-base/grid-footer-template-top-grid.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/knowledge-base/grid-footer-template-top-grid.md b/knowledge-base/grid-footer-template-top-grid.md index b537324815..78627c3b5f 100644 --- a/knowledge-base/grid-footer-template-top-grid.md +++ b/knowledge-base/grid-footer-template-top-grid.md @@ -22,8 +22,10 @@ ticketid: 1668460 ## Description -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? +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