Events in Blazor ProgressBar Component

21 Dec 20213 minutes to read

This section describes the Progress Bar component’s events that will be triggered when appropriate actions are performed. The events should be provided to the Progress Bar through the ProgressBarEvents.

ValueChanged

The ValueChanged event triggers when the progress value is changed.

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" Value="80" Height="60" Minimum="0" Maximum="100">
    <ProgressBarEvents ValueChanged="@ValueHandler"></ProgressBarEvents>
</SfProgressBar>

@code{
    public void ValueHandler(ProgressValueEventArgs args)
    {
        // Here you can customize the code.
    }
}

ProgressCompleted

The ProgressCompleted event triggers when the progress attains the Maximum value.

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" Value="100" Height="60" Minimum="0" Maximum="100">
    <ProgressBarEvents ProgressCompleted="@ProgressHandler"></ProgressBarEvents>
</SfProgressBar>

@code{
    public void ProgressHandler(ProgressValueEventArgs args)
    {
        // Here you can customize the code.
    }
}

AnimationComplete

The AnimationComplete event triggers when an animation is enabled and the progress attains to maximum value.

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" Value="100" Height="60" Minimum="0" Maximum="100">
    <ProgressBarAnimation Enable="true"></ProgressBarAnimation>
    <ProgressBarEvents AnimationComplete="@AnimationHandler"></ProgressBarEvents>
</SfProgressBar>

@code{
    public void AnimationHandler(ProgressValueEventArgs args)
    {
        // Here you can customize the code.
    }
}

AnnotationRender

The AnnotationRender event triggers before each annotation is rendered.

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Circular" Value="80" Height="160" Minimum="0" Maximum="100">
    <ProgressBarEvents AnnotationRender="@AnnotationHandler"></ProgressBarEvents>
    <ProgressBarAnnotations>
        <ProgressBarAnnotation>
            <ContentTemplate>
                <div style="font-size:20px;font-weight:bold;color:#000000;fill:#ffffff">
                    <span>
                        80%
                    </span>
                </div>
            </ContentTemplate>
        </ProgressBarAnnotation>
    </ProgressBarAnnotations>
</SfProgressBar>

@code{
    public void AnnotationHandler(AnnotationRenderEventArgs args)
    {
        // Here you can customize the code.
    }
}

TextRender

The TextRender event triggers before the text is rendered.

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" ShowProgressValue="true" Value="100" Height="60" Minimum="0" Maximum="100">
    <ProgressBarEvents TextRender="@TextRenderHandler"></ProgressBarEvents>
</SfProgressBar>

@code{
    public void TextRenderHandler(TextRenderEventArgs args)
    {
        // Here you can customize the code.
    }
}

Loaded

The Loaded event triggers after the component is rendered.

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Linear" Value="100" Height="60" Minimum="0" Maximum="100">
    <ProgressBarEvents Loaded="@LoadedHandler"></ProgressBarEvents>
</SfProgressBar>

@code{
    public void LoadedHandler(System.EventArgs args)
    {
        // Here you can customize the code.
    }
}