Blazor ProgressBar Visible Flag

So if I have a progressbar like so

           <RadzenProgressBar Value="100" ShowValue="false" Visible="@ShowProgress" Mode="ProgressBarMode.Indeterminate" Style="margin-bottom: 20px" />

And I want to hide/show it using the @ShowProgress variable what is the trick to making sure that when someone presses a button it shows the progress bar while a background action is taking place. I have tried it every which way but it's just not working async or sync and with or without StateHasChanged.

Pretty convinced this isn't working as intended. Does anyone have an example of showing and hiding a progressbar on a button click that works?

Okay so ... I got it to work by sticking it in an @if like so:

        @if (_message.Length > 0)
        {
            <RadzenProgressBar Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" Style="margin-bottom: 20px" />

        }

Then in the @code I am setting the value of the message. You could use really any variable but the main thing is to be sure to make the async calls properly so the control starts to move while your long running process is under way.

@code {

    private string _message = String.Empty;

    void UpdateData(MouseEventArgs e, int number)
    {
        _message = "processing";
        Task.Run(() => Refresher());
        StateHasChanged();
    }

    void Refresher()
    {
        //make your long running API call here (I injected a service for that)
        _message = String.Empty;
       //This is necessary because we are in another thread
        InvokeAsync(() => {
            StateHasChanged();
        });
    }
}

Might help someone, but it definitely solved my problem.

1 Like

Thank you! This is really great. I was fighting with the same problem.

I can't seem to reproduce such an issue. Toggling a page property correctly shows and hides the Progressbar.

The code essentially is:

<RadzenCheckBox @bind-Value="visible" />
<RadzenProgressBar Visible="@visible" />
@code {
  bool visible = true;
}

I think for me the problem is that my "code behind" isn't a partial class. It is inherited by the frontend.
The code behind inherits OwningComponentBase (in case this might be part of the problem).

I haven't tried changing because it is to much work and I have to little time at the moment.

@korchev
I have the same issue:
Click event of splitbutton "button export of crud page , added new option" .
Added a page property with value false .
set the page property value in the Load to false , set the page property to true in the click event of split button, then invoke a custom method .
The custom methods runs but the progressbar doesn't show or hide .

The export button performs full navigation to download a file, there is no way to show progress.

Hi , I'm not using the export function .. just expanded the menu with new (extra ) option to envoke a custom method. on page.razor.cs

Setting a flag will not cause the Blazor UI to update until your method finishes execution. Check here: Refresh a component visibility - #2 by korchev

That did the trick.. now the progress works as expected ,

PS: searching the forum is quite cumbersome some times , and it is a great knowledge resource. sometimes the answers are there but difficult to find .
Could we mark As answer , or some more tags to make this easier to find.

This suggestion for progress service has my vote::

No. This forum software isn't stackoverflow.