Hi
I have a simple POC Blazor app which shows 2 DataGrids.
The first one is without virtualization, the second one uses virtualization.
Both of them have AllowSorting set to true.
In the first grid the sorting works fine. In the second grid, it doesn't.
I can't figure out why not. Any ideas on this problem?
Thanx in advance and greetings, Henk
@page "/counter"
<RadzenDropDown TValue="int" Data="@Ints" @bind-Value="selectedInt" Change="@DropdownChanged"></RadzenDropDown>
radzen virtualization via front end with prefetch of all data
<RadzenDataGrid Data="@orderDetailsPrefetched" TItem="OrderDetail" AllowVirtualization="true" Style="height:400px"
AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" LogicalFilterOperator="LogicalFilterOperator.Or"
AllowSorting="true">
<Columns>
<RadzenDataGridColumn TItem="OrderDetail" Property="OrderID" Title="OrderID" />
<RadzenDataGridColumn TItem="OrderDetail" Property="ProductID" Title="ProductID" />
<RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
<Template Context="detail">
@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
<RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
<Template Context="detail">
@String.Format("{0}%", detail.Discount * 100)
</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
radzen virtualization via backend with loaddata method
<p>count = '@count'</p>
<RadzenDataGrid Data="@orderDetailsLazy" Count="@count" LoadData="@LoadDataLazy" TItem="OrderDetail" AllowVirtualization="true" Style="height:400px"
AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" LogicalFilterOperator="LogicalFilterOperator.Or"
AllowSorting="true" @ref="LazyGrid">
<Columns>
<RadzenDataGridColumn TItem="OrderDetail" Property="OrderID" Title="OrderID" />
<RadzenDataGridColumn TItem="OrderDetail" Property="ProductID" Title="ProductID" />
<RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
<Template Context="detail">
@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
<RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
<Template Context="detail">
@String.Format("{0}%", detail.Discount * 100)
</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
@code {
private int currentCount = 0;
private int count = 500;
private int selectedInt;
IEnumerable<OrderDetail> orderDetailsPrefetched;
IEnumerable<OrderDetail> orderDetailsLazy;
RadzenDataGrid<OrderDetail> LazyGrid = default!;
IEnumerable<int> Ints = new List<int> { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 };
protected override void OnInitialized()
{
base.OnInitialized();
orderDetailsPrefetched = GetFilteredData(0, count).List;
}
protected List<OrderDetail> OrderDetailTable()
{
var list = new List<OrderDetail>();
for (int i = 0; i < 500; i++)
{
list.Add(new OrderDetail
{
OrderID = i,
Discount = i,
ProductID = 1,
Quantity = i,
UnitPrice = i
});
}
return list;
}
protected (IEnumerable<OrderDetail> List, int Count) GetFilteredData(int skip, int take)
{
// get table with 500 records
var list = OrderDetailTable();
// filter table based on orderId starts with select int from dropdown
if (selectedInt > 0)
{
list = list.Where(x => x.OrderID.ToString().StartsWith(selectedInt.ToString())).ToList();
}
// get count of filtered data
var listCount = list.Count;
// return skip and take with count
return (list.Skip(skip).Take(take).ToList(), listCount);
}
void LoadDataLazy(LoadDataArgs args)
{
var data = GetFilteredData(args.Skip.Value, args.Top.Value);
orderDetailsLazy = data.List;
count = data.Count;
}
private void DropdownChanged(object obj)
{
orderDetailsPrefetched = GetFilteredData(0, count).List;
LazyGrid.Reload();
}
public class OrderDetail
{
public int OrderID { get; set; }
public int ProductID { get; set; }
public decimal UnitPrice { get; set; }
public int Quantity { get; set; }
public decimal Discount { get; set; }
}
}