RadzenDataGrid in Weather component

Radzen.Blazor Components
1

Hello, I was struggling with this for quite a long time so decided to ask for help. How should Weather component from Blazor 8 Server app skeleton app be modified if we were to replace <table> with

<RadzenDataGrid PageSize="3"
                AllowPaging="true"
                Data="@forecasts"
                TItem="WeatherForecast"
                ColumnWidth="300px">
        <Columns>
            <RadzenDataGridColumn TItem="WeatherForecast" Property="Date" Title="Date" />
            <RadzenDataGridColumn TItem="WeatherForecast" Property="TemperatureC" Title="Temperature C" />
            <RadzenDataGridColumn TItem="WeatherForecast" Title="Temperature F">
                <Template Context="data">@data.TemperatureF</Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="WeatherForecast" Property="Summary" Title="Summary"/>
        </Columns>
</RadzenDataGrid>

for weather data? If @attribute [StreamRendering] stays, paging buttons don't work. If @rendermode InteractiveServer is used instead, then paging buttons work but OnInitializedAsync gets called twice and loading indicator is not shown during the first call, but it is shown during the second call.

If both are used, data gets loaded twice and both times Loading... indicator is shown properly.

The only way, to achieve the same functionality as the original component, was to overload OnInitialized instead of OnInitializedAsync and to call asynchronous method LoadData without awaiting it and with @rendermode InteractiveServer. LoadData needs to call StateHasChanged(); at the end. So, overall, pretty hacky.

@page "/weather"
@rendermode InteractiveServer

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

@if (forecasts == null)
{
    <p>
        <em>Loading...</em>
    </p>
}
else
{
    <RadzenDataGrid PageSize="3"
                    AllowPaging="true"
                    Data="@forecasts"
                    TItem="WeatherForecast"
                    ColumnWidth="300px">
            <Columns>
                <RadzenDataGridColumn TItem="WeatherForecast" Property="Date" Title="Date" />
                <RadzenDataGridColumn TItem="WeatherForecast" Property="TemperatureC" Title="Temperature C" />
                <RadzenDataGridColumn TItem="WeatherForecast" Title="Temperature F">
                    <Template Context="data">@data.TemperatureF</Template>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="WeatherForecast" Property="Summary" Title="Summary"/>
            </Columns>
    </RadzenDataGrid>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override void OnInitialized()
    {
        LoadData();
    }

    private async Task LoadData()
    {
        // Simulate asynchronous loading to demonstrate streaming rendering
        await Task.Delay(1500);

        var startDate = DateOnly.FromDateTime(DateTime.Now);
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = summaries[Random.Shared.Next(summaries.Length)]
        }).ToArray();
        
        StateHasChanged();
    }

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

Does anybody have any "better" solution for this?
Thanks.

2

Hi @Predrag,

Blazor events (such as paging) need interactivity. OnInitializedAsync is executed twice probably because of prerendering. RadzenDataGrid has no power to execute the OnInitializedAsync method of its parent twice.

3

Thanks @korchev for your message. What would be the correct way to implement this scenario with RadzenDataGrid for Blazor? So basically, some data would need to be loaded when showing the page/component, displaying some sort of "loading indicator" until data is loaded and then showing data in the multi page RadzenDataGrid. Pretty much to duplicate Weather component behavior, but with RadzenDataGrid instead of html table.
Thanks.

4

I don't have a "better" solution. I would use whatever works.

1 Like