MudDataGrid虚拟化模式加载时能否排序？箭头显示但未生效

可以实现加载时的排序功能。当前问题的核心是：启用Virtualize模式后，MudDataGrid不会自动对绑定的原始数据执行排序逻辑，InitialDirection属性仅负责显示表头的排序箭头，不会触发实际的数据排序操作。

解决步骤 #

1. 初始化时预排序数据 #

在组件的初始化方法中，根据目标字段和排序方向对数据源进行预排序，确保组件加载时显示的是已排序的数据。

2. 处理后续排序交互（可选） #

如果需要支持用户后续点击表头切换排序，需要绑定SortChanged事件，在事件回调中重新排序数据源并更新绑定的集合。

完整代码示例 #

前端Razor代码 #

<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"
             SortChanged="OnSortChanged">
    <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>

后台C#代码 #

private MudDataGrid<WeatherForecast> refMudDataGrid;
private List<WeatherForecast> forecasts = new();

protected override async Task OnInitializedAsync()
{
    // 模拟获取数据
    forecasts = await GetWeatherForecastsAsync();
    
    // 初始化时按TemperatureC降序排序
    forecasts = forecasts.OrderByDescending(x => x.TemperatureC).ToList();
}

private void OnSortChanged(DataGridSortingEventArgs<WeatherForecast> args)
{
    // 根据排序参数重新排序数据
    foreach (var sortDefinition in args.SortDefinitions)
    {
        switch (sortDefinition.SortBy)
        {
            case nameof(WeatherForecast.Date):
                forecasts = sortDefinition.Direction == SortDirection.Ascending
                    ? forecasts.OrderBy(x => x.Date).ToList()
                    : forecasts.OrderByDescending(x => x.Date).ToList();
                break;
            case nameof(WeatherForecast.TemperatureC):
                forecasts = sortDefinition.Direction == SortDirection.Ascending
                    ? forecasts.OrderBy(x => x.TemperatureC).ToList()
                    : forecasts.OrderByDescending(x => x.TemperatureC).ToList();
                break;
            case nameof(WeatherForecast.TemperatureF):
                forecasts = sortDefinition.Direction == SortDirection.Ascending
                    ? forecasts.OrderBy(x => x.TemperatureF).ToList()
                    : forecasts.OrderByDescending(x => x.TemperatureF).ToList();
                break;
            case nameof(WeatherForecast.Summary):
                forecasts = sortDefinition.Direction == SortDirection.Ascending
                    ? forecasts.OrderBy(x => x.Summary).ToList()
                    : forecasts.OrderByDescending(x => x.Summary).ToList();
                break;
        }
    }
    // 通知组件更新数据
    StateHasChanged();
}

// 模拟数据获取方法
private async Task<List<WeatherForecast>> GetWeatherForecastsAsync()
{
    var rng = new Random();
    return Enumerable.Range(1, 50).Select(index => new WeatherForecast
    {
        Date = DateTime.Now.AddDays(index),
        TemperatureC = rng.Next(-20, 55),
        Summary = Summaries[rng.Next(Summaries.Length)]
    }).ToList();
}

private static readonly string[] Summaries = new[]
{
    "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};

public class WeatherForecast
{
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    public string Summary { get; set; }
}

关键说明 #

• 虚拟化模式下，MudDataGrid依赖绑定的Items集合的物理顺序来渲染数据，因此必须确保数据源本身是已排序的状态。
• InitialDirection仅控制UI显示，不会自动触发数据排序，必须手动在初始化或排序事件中处理数据逻辑。

内容的提问来源于stack exchange，提问作者Axium7