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.
}
}