@using ServerApp.Data

<TelerikGrid Data=@forecasts Height="550px"
             Pageable="true" Sortable="true"
             PageSize="20" Groupable="true">
    <GridColumns>
        <GridColumn Field="Date">
            <Template>
                @((context as WeatherForecast).Date.ToString("dddd, dd MMM yyyy"))
            </Template>
        </GridColumn>
        <GridColumn Field="TemperatureC" Title="Temp. C" />
        <GridColumn Field="TemperatureF" Title="Temp. F" />
        <GridColumn Field="Summary" />
    </GridColumns>
</TelerikGrid>

@code {

    List<WeatherForecast> forecasts { get; set; } = new List<WeatherForecast>(); // Works fine!


    //List<WeatherForecast> forecasts { get; set; } //Need to sort a field to show the rows

    protected override async Task OnInitializedAsync()
    {
        //forecasts = new List<WeatherForecast>(); //this helps

        await Task.Delay(2000);
        forecasts = await GetForecasts();

        //these do not help
        //await Task.Delay(200);
        //StateHasChanged();
    }

    public Task<List<WeatherForecast>> GetForecasts()
    {
        var rng = new Random();
        return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = DateTime.Now.Date.AddDays(index),
            TemperatureC = rng.Next(-20, 55),
            Summary = $"summary {index}"
        }).ToList());
    }
}