Radzen DataGrid Loading Indicator not showing up

Radzen Studio Blazor WebAssembly
1

I'm using the RadzenDataGrid isLoading property to show the loading indicator as documented here
Blazor DataGrid custom data-binding (radzen.com)

But the loading indicator is not showing up

<RadzenDataGrid TItem="PortfolioWrapper"
                Data="@portfolioWrappers"
                AllowPaging="true"
                PageSize="20"
                AllowSorting="true"
                AllowFiltering="true"
                AllowColumnResize="true"
                Count="@assetProxyCount"
                FilterMode="FilterMode.Simple"
                IsLoading="@isLoading"
                @ref="grid"
                LoadData="@LoadData"
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive">

    <Columns>
    ........

 protected async Task LoadData()
        {
            isLoading = true;
           //dostuff
            isLoading = false;
       }

Please advice

2

I have the same problem on Server side...

3

image
image1920×1080 145 KB

4

Thanks , but this does not fix the issue.

5

Well, it works as expected on our demo. Check what's different in your case.

7

Well didn't work either on my code also.
I have the following code

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
isLoading = true;
await Task.Yield();
ADUsers = await AzureADService.GetADUsersAsync();
isLoading = false;
StateHasChanged();
}
}

but instead of the loading spinner I am getting the "No records to display" message

1 Like
8

We recently ran into this issue when calling a method to load the datagrid from a base class. Oddly enough the spinner does work as expected when the method is called from a button click on the page, but simply refused to work when called from the base class.

By adding a StateHasChanged method call before the Yeild fixed the issue for us.

i.e.

private async Task GetReportData()
    {
        dataGridLoading = true;
        StateHasChanged();
        await Task.Yield();
9

By default, Radzen loads grids with the OnInitializedAsync() event. You can read more about this event here:

This results a delay because the page won't render until the grid is loaded. To display a progress indicator follow these steps:

  1. Add two variables manage the display of the loading indicator and the grid:

     protected bool isLoading = true;
 protected bool showGrid = false;

  2. Delete the OnInitializedAsync() method and add the code to get the data and show/hide the loading indicator/grid in the OnAfterRenderAsync() method:

     protected override async Task OnAfterRenderAsync(bool firstRender)
 {
     if (firstRender)
     {
         users = await StoreSurveyService.GetUsers();
         isLoading = false;
         showGrid = true;
         StateHasChanged();
     }
 }

  3. Add a loading indicator with a Radzen Progress Bar before the grid and display it if isLoading is true (which is the default when the page loads):

@if (isLoading)
{
    <RadzenStack Orientation="Orientation.Vertical" Visible="@isLoading" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Wrap="FlexWrap.Wrap" Class="rz-m-12" Gap="2rem">
        <RadzenProgressBarCircular ShowValue="true" Mode="ProgressBarMode.Indeterminate" Size="ProgressBarCircularSize.Large">
            <Template>
            </Template>
        </RadzenProgressBarCircular>
        <RadzenText TextStyle="TextStyle.H6">Loading, please wait...</RadzenText>
    </RadzenStack>
}
  1. Add a Visible attribute to the RadzenStack that holds the "showGrid" variable:
<RadzenStack Visible="@showGrid">
...
    <RadzenDataGrid @ref="grid0" ColumnWidth="200px" AllowFiltering="true" FilterMode="FilterMode.Advanced" AllowPaging="true" AllowSorting="true" ShowPagingSummary="true" PageSizeOptions=@(new int[]{5, 10, 20, 30})
                            Data="@users" TItem="MEC.StoreSurvey.UI.Models.StoreSurvey.User" RowSelect="@EditRow">
...
</RadzenStack>

Summary:

When the page is loaded, the loading indicator will show until the grid data is retrieved on the OnAfterRenderAsync() method. The showGrid variable is then flipped to display the RadzenStack component that holds the grid.