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.