TelerikGrid async datasource

I'm trying to set data of grid by fetching data asynchronously from DB but it is not working. Probably I'm missing something.

@page "/Test"
@using System.Dynamic;

<div class="col-md-12">
    <TelerikButton OnClick="ButtonClick">Click Me to see data</TelerikButton>
    <TelerikGrid Class="grid"
                 Data=@GridFilter
                 Sortable="true"
                 FilterMode="GridFilterMode.FilterMenu"
                 Resizable="true"
                 SelectionMode="GridSelectionMode.Multiple"
                 Pageable="true"
                 PageSize=20
                 Navigable="true">

        <GridColumns>
            <GridColumn Field="Field1" Title="Field1" />
            <GridColumn Field="Field2" Width="300px" Title="Field2" TextAlign="@ColumnTextAlign.Center" />
        </GridColumns>
    </TelerikGrid>
</div>

}
@code {
    private List<dynamic> GridFilter;

    private async Task ButtonClick()
    {
        GridFilter = await this.GetData();
    }

    private async Task<List<dynamic>> GetData()
    {
        Task<List<dynamic>> b = new(() => {
            dynamic A = new ExpandoObject();
            A.Field1 = "Field 1";
            A.Field2 = "Field 2";
            List<dynamic> grid = new();
            grid.Add(A);
            return grid;
        });
        return await b;
    }

}

Based on this documentation, if you want the grid to automatically update when you update the list, you have to declare the collection as an ObservableCollection. You'll likely also have to initialize an empty collection so that the grid can subscribe to its events:

private ObservableCollection<dynamic> GridFilter = new ObservableCollection<dynamic>();

But that means you cannot replace GridFilter with a new instance of a collection, like you're doing here:

GridFilter = await this.GetData();

You'll have to add each item to the existing collection. You can either do that in your ButtonClick() event, or add the items directly to GridFilter in GetData().

ObservableCollection doesn't support AddRange() unfortunately, so you'll have to add one at a time. Or, you can use this ObservableRangeCollection class someone wrote to make it support AddRange.

The other way is to call the Rebind method on the grid after you change the collection, which might look something like this (untested, so it might need some tweaks):

    <TelerikGrid Class="grid"
                 Data=@GridFilter
                 Sortable="true"
                 FilterMode="GridFilterMode.FilterMenu"
                 Resizable="true"
                 SelectionMode="GridSelectionMode.Multiple"
                 Pageable="true"
                 PageSize=20
                 Navigable="true"
				 @ref="@GridRef">

    private async Task ButtonClick()
    {
        GridFilter = await this.GetData();
		GridRef.Rebind();
    }