Footer and Header is being incorrectly rendered for frozen columns in DataGrid #1145

New Issue

claunia · 2026-01-29T17:49:34Z

claunia commented

2026-01-29 17:49:34 +00:00

Originally created by @OndrejUzovic on GitHub (Mar 1, 2024).

When FooterTemplate is used for a frozen column in DataGrid then it is being incorrectly rendered.
It seems the problem is that GroupFooterTemplate overlaps FooterTemplate when scrolling through data.

The same problem has the column header.

Her is the slightly modified code from the demo page https://blazor.radzen.com/datagrid-group-footer-template.
(The DataGrid height is set to 400px and the column 'Order' is set to Frozen.)

To reproduce the issue, please execute the code and move the scrollbar in DataGrid down.

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage

<RadzenDataGrid @ref="ordersGrid" ColumnWidth="220px" AllowGrouping="false" AllowFiltering="true" AllowPaging="true" AllowSorting="true" 
        Data="@orders" TItem="Order" Render="@OnRender" Style="height:400px;">
    <GroupHeaderTemplate>
        @context.GroupDescriptor.GetTitle(): @(context.Data.Key ?? ""), Group items count: @context.Data.Count, Last order date: @(context.Data.Items.Cast<Order>().OrderByDescending(o => o.OrderDate).FirstOrDefault()?.OrderDate)
    </GroupHeaderTemplate>
    <Columns>
        <RadzenDataGridColumn Width="50px" TItem="Order" Title="#" Filterable="false" Sortable="false" TextAlign="TextAlign.Center">
            <Template>
                @(orders.IndexOf(context) + 1)
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Order" Property="OrderID" Title="Order ID" Frozen>
            <FooterTemplate>
                Displayed orders: <b>@ordersGrid.View.Count()</b> of <b>@orders.Count()</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Order" Property="Freight" Title="Freight">
            <Template Context="order">
                @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
            </Template>
            <FooterTemplate>
                Total amount: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", orders.Sum(o => o.Freight))</b>
            </FooterTemplate>
            <GroupFooterTemplate>
                Group amount: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", context.Data.Items.Cast<Order>().Sum(o => o.Freight))</b>
            </GroupFooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date" FormatString="{0:d}">
            <FooterTemplate>
                Last order date: <b>@String.Format("{0:d}", orders.OrderByDescending(o => o.OrderDate).LastOrDefault()?.OrderDate)</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Width="160px" TItem="Order" Property="ShipName" Title="Ship Name" />
        <RadzenDataGridColumn Width="160px" TItem="Order" Property="Employee.LastName" Title="Employee">
            <Template Context="order">
                @order.Employee?.FirstName @order.Employee?.LastName
            </Template>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

@code {
    IList<Order> orders;
    RadzenDataGrid<Order> ordersGrid;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        orders = dbContext.Orders.Include("Customer").Include("Employee").ToList();
    }

    void OnRender(DataGridRenderEventArgs<Order> args)
    {
        if(args.FirstRender)
        {
            args.Grid.Groups.Add(new GroupDescriptor(){ Property = "Employee.LastName", Title = "Employee" });
            StateHasChanged();
        }
    }
}

Originally created by @OndrejUzovic on GitHub (Mar 1, 2024). When `FooterTemplate` is used for a frozen column in DataGrid then it is being incorrectly rendered. It seems the problem is that `GroupFooterTemplate` overlaps `FooterTemplate` when scrolling through data. ![image](https://github.com/radzenhq/radzen-blazor/assets/55758368/411279bb-1f64-402b-a105-e7d374f20d19) The same problem has the column header. ![image](https://github.com/radzenhq/radzen-blazor/assets/55758368/6b3dad78-bf3c-4b02-bd2f-ba554ad9c70f) Her is the slightly modified code from the demo page https://blazor.radzen.com/datagrid-group-footer-template. (The DataGrid height is set to 400px and the column 'Order' is set to `Frozen`.) To reproduce the issue, please execute the code and move the scrollbar in DataGrid down. ``` @using RadzenBlazorDemos.Data @using RadzenBlazorDemos.Models.Northwind @using Microsoft.EntityFrameworkCore @inherits DbContextPage <RadzenDataGrid @ref="ordersGrid" ColumnWidth="220px" AllowGrouping="false" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@orders" TItem="Order" Render="@OnRender" Style="height:400px;"> <GroupHeaderTemplate> @context.GroupDescriptor.GetTitle(): @(context.Data.Key ?? ""), Group items count: @context.Data.Count, Last order date: @(context.Data.Items.Cast<Order>().OrderByDescending(o => o.OrderDate).FirstOrDefault()?.OrderDate) </GroupHeaderTemplate> <Columns> <RadzenDataGridColumn Width="50px" TItem="Order" Title="#" Filterable="false" Sortable="false" TextAlign="TextAlign.Center"> <Template> @(orders.IndexOf(context) + 1) </Template> </RadzenDataGridColumn> <RadzenDataGridColumn TItem="Order" Property="OrderID" Title="Order ID" Frozen> <FooterTemplate> Displayed orders: <b>@ordersGrid.View.Count()</b> of <b>@orders.Count()</b> </FooterTemplate> </RadzenDataGridColumn> <RadzenDataGridColumn TItem="Order" Property="Freight" Title="Freight"> <Template Context="order"> @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight) </Template> <FooterTemplate> Total amount: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", orders.Sum(o => o.Freight))</b> </FooterTemplate> <GroupFooterTemplate> Group amount: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", context.Data.Items.Cast<Order>().Sum(o => o.Freight))</b> </GroupFooterTemplate> </RadzenDataGridColumn> <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date" FormatString="{0:d}"> <FooterTemplate> Last order date: <b>@String.Format("{0:d}", orders.OrderByDescending(o => o.OrderDate).LastOrDefault()?.OrderDate)</b> </FooterTemplate> </RadzenDataGridColumn> <RadzenDataGridColumn Width="160px" TItem="Order" Property="ShipName" Title="Ship Name" /> <RadzenDataGridColumn Width="160px" TItem="Order" Property="Employee.LastName" Title="Employee"> <Template Context="order"> @order.Employee?.FirstName @order.Employee?.LastName </Template> </RadzenDataGridColumn> </Columns> </RadzenDataGrid> @code { IList<Order> orders; RadzenDataGrid<Order> ordersGrid; protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); orders = dbContext.Orders.Include("Customer").Include("Employee").ToList(); } void OnRender(DataGridRenderEventArgs<Order> args) { if(args.FirstRender) { args.Grid.Groups.Add(new GroupDescriptor(){ Property = "Employee.LastName", Title = "Employee" }); StateHasChanged(); } } } ```

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1145