radzen-blazor
radzen-blazor copied to clipboard
Footer and Header is being incorrectly rendered for frozen columns in DataGrid
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();
}
}
}