datagridvirtualizationmudblazor

MudDataGrid Virtualized Default Sort Order


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

So

    <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>

Solution

  • 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;
        }
    

    Impact on Filtering

    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.

    enter image description here