Is it possible to Sort the MudDataGrid when it Loads in Virtualization mode? Graphically the sort order Arrow is showing but it's not sorting.
Thank you
<MudDataGrid @ref="refMudDataGrid"
Items="forecasts"
Hover="true"
Elevation="0"
Filterable="true"
FilterMode="@DataGridFilterMode.Simple"
HeaderClass="header-class"
Virtualize="true"
Height="500px"
ItemSize="25"
OverscanCount="2"
>
<Columns>
<PropertyColumn Property="x => x.Date" Title="Date" />
<PropertyColumn Property="x => x.TemperatureC" Title="Temp. (C)" InitialDirection="SortDirection.Descending" />
<PropertyColumn Property="x => x.TemperatureF" Title="Temp. (F)" />
<PropertyColumn Property="x => x.Summary" Title="Summary" />
</Columns>
</MudDataGrid>
This looks like a bug that needs reporting here https://github.com/MudBlazor/MudBlazor/issues.
Your solution is not the fix: it causes a render loop. Add some console logging into your OnAfterRenderAsync
and see what happens:
private int _counter;
protected override Task OnAfterRenderAsync(bool firstRender)
{
StateHasChanged();
Console.WriteLine($"Yet another Render {_counter}");
_counter++;
return base.OnAfterRenderAsync(firstRender);
}
Yet another Render 1158
Yet another Render 1159
Yet another Render 1160
Yet another Render 1161
Yet another Render 1162
..... endlessly repeating
The get-around-fix is to only call StateHasChanged
on the second render.
private bool _defaultSortingSet;
protected override Task OnAfterRenderAsync(bool firstRender)
{
if (!_defaultSortingSet && refMudDataGrid is not null)
{
_defaultSortingSet = true;
StateHasChanged();
}
return Task.CompletedTask;
}
It doesn't.
Here's my demo page based on all the information you've provided:
@page "/weather"
<PageTitle>Weather</PageTitle>
<MudText Typo="Typo.h3" GutterBottom="true">Weather forecast</MudText>
<MudText Typo="Typo.body1" Class="mb-8">This component demonstrates fetching data from the server.</MudText>
@if (forecasts == null)
{
<MudProgressCircular Color="Color.Default" Indeterminate="true" />
}
else
{
<MudDataGrid @ref="refMudDataGrid"
Items="forecasts"
Hover="true"
Elevation="0"
Filterable="true"
FilterMode="@DataGridFilterMode.Simple"
HeaderClass="header-class"
Height="500px"
ItemSize="25"
OverscanCount="2">
<Columns>
<PropertyColumn Property="x => x.Date" Title="Date" />
<PropertyColumn Property="x => x.TemperatureC" Title="Temp. (C)" InitialDirection="SortDirection.Descending" />
<PropertyColumn Property="x => x.TemperatureF" Title="Temp. (F)" />
<PropertyColumn Property="x => x.Summary" Title="Summary" />
</Columns>
</MudDataGrid>
}
@code {
private WeatherForecast[]? forecasts;
private MudDataGrid<WeatherForecast>? refMudDataGrid;
private bool _defaultSortingSet;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate a loading indicator
await Task.Delay(500);
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
forecasts = Enumerable.Range(1, 500).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)]
}).ToArray();
}
private class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
protected override Task OnAfterRenderAsync(bool firstRender)
{
if (!_defaultSortingSet && refMudDataGrid is not null)
{
_defaultSortingSet = true;
StateHasChanged();
}
return Task.CompletedTask;
}
}
And applying a filter on Summary looks like this. You can see the sorted and filtered list behind.