RadzenGrid busy overlay

ade · October 9, 2020, 6:53am

Hello,
here is described how to set the IsLoading status of a grid using the Radzen IDE (Angular).

https://forum.radzen.com/t/busy-indicator/2211

Is this feature available for Radzen Blazor too?

Thanks

enchev · October 9, 2020, 6:56am

This feature is not available in Blazor DataGrid since the binding is very different compared to Angular. You can check our dashboard to for more info about busy dialog in Blazor:
https://blazor.radzen.com/dashboard

github.com

akorchev/blazor.radzen.com/blob/master/Pages/DashboardPage.razor

@page "/dashboard"
@using System.Text.RegularExpressions
@using Radzen.Blazor.Rendering
@using RadzenBlazorDemos.Models.GitHub
@using RadzenBlazorDemos.Services
@inject GitHubService GitHub

<h1>Blazor GitHub Issues</h1>
<p>
    Sample dashboard that uses data from the <a href="https://github.com/dotnet/aspnetcore/issues" target="_blank">ASP.NET GitHub repository</a>. Data is updated 24 hours.
</p>
<div class="container-fluid" style="position: relative">
    <RadzenCard Visible=@fetchingData style="z-index: 1; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5)">
        <RadzenCard Visible=@(error == null) style="margin: 32px auto; width: 80%">
            <h3 style="margin: 32px 0">Fetching data from GitHub: page @currentPage of @totalPages.</h3>
            <RadzenProgressBar Value=@currentPage Max=@totalPages ShowValue="false" Style="display: inline-block; width: 180px; height: 8px; margin-top: 16px" />
        </RadzenCard>
        <RadzenCard Visible=@(error != null) style="margin: 32px auto; width: 80%">
            <h3 style="margin: 32px 0">An error has occurred: @error. Try reloading your browser.</h3>
        </RadzenCard>

This file has been truncated. show original

ade · October 9, 2020, 7:24am

Hi @enchev,
thanks for the quick answer.

The background of my questions is the following: I have configured a row selected event callback. When the user selects a row, the event is fired. While the event handler is still running, I would like to prevent the user from selecting another row. Is then alternatively possible to disable the selection of rows?

Thanks

enchev · October 9, 2020, 7:26am

You can do that with a simple flag in your row select code - if the code is still executing do not allow another execute.

ade · October 9, 2020, 7:29am

Unfortunately this is not a valid workaround for me. When the user clicks on the row, other controls become visible. Using a flag in the row select event handler would prevent the code from running but the selection will still move to a different row, which might be misleading for the user.

enchev · October 9, 2020, 7:34am

You can show busy overlay similar to the dashboard example I've posted in my first reply.

ade · October 9, 2020, 7:39am

Do you mean the RadzenProgressBar control?

enchev · October 9, 2020, 8:08am

It's not only the progress bar:

enchev · October 9, 2020, 8:13am

Actually there is a very simple way to prevent row selection:

you can do that conditionally pointer-events:none|auto;

ade · October 9, 2020, 8:44am

Hi again, I followed the example of the dashboard and I got it working.

Thanks a lot for your support