DxProgressBar.Completed Event

Fires when the progress bar value reaches its maximum.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback Completed { get; set; }

Remarks

The progress bar raises the ProgressCompleted event when the Value reaches the MaxValue.

<DxButton Text="Show a notification" Click="ShowToast" />
<DxToastProvider ThemeMode="ToastThemeMode.Pastel" />

<DxToast @ref=toast 
    Text="The process is completed." 
    DisplayTime="@TimeSpan.FromSeconds(0)" 
    FreezeOnClick="true" 
    Click="HideProgressBar">
    <Template>
        <DxProgressBar @ref=bar 
            Value="value" 
            ShowLabel="false" 
            ProgressCompleted="CloseToast" />
    </Template>
</DxToast>

@code {
    DxProgressBar bar;
    DxToast toast;
    int value;
    bool running;

    private void ShowToast() {
        value = 0;
        toast.Show();
        RunProgress();
    }

    private void RunProgress() {
        if (running) return;
        running = true;
        InvokeAsync(async () => {
            while (running && value < 100) {
                value++;
                await Task.Delay(30);
                StateHasChanged();
            }
            running = false;
        });
    }

    private void HideProgressBar() {
        bar.Visible = false;
        running = false;
        StateHasChanged();
    }

    private void CloseToast() {
        toast.Close();
    }
}