Contents
- ValueChanged
- ProgressCompleted
Having trouble getting help?
Contact Support
Contact Support
Events
17 Feb 20222 minutes to read
ValueChanged
This event is triggered when the progress value is changed. This event contains the following event argument.
@(Html.EJS().ProgressBar("lineardeterminate").Type(Syncfusion.EJ2.ProgressBar.ProgressType.Linear).Value(100)
.Height("60").Load("Load")
.Minimum(0).Maximum(100).ValueChanged("progressValue")
.Animation(an => an.Enable(true).Delay(0).Duration(2000))
.Render())
ProgressCompleted
This event is triggered when the progress attains the Maximum value. This event contains the following argument.
<div id="pause-container">
@(Html.EJS().ProgressBar("pause-container").Type(Syncfusion.EJ2.ProgressBar.ProgressType.Circular).Value(100)
.Width("160px").Height("160px")
.Minimum(0).Maximum(100).Load("progressLoad")
.Animation(an => an.Enable(true).Delay(0).Duration(2000)).ProgressCompleted("progressCompleted")
.Annotations(an =>
{
an.Content(""<div style='font-size:20px; font-weight:bold; color:#ffffff;fill:#ffffff'><span>60%</span></div>"").Add();
}).Render())
</div>
<script>
var clearTimeout1;
var clearTimeout2;
var progressCompleted = function (args) {
clearTimeout(clearTimeout2);
clearTimeout2 = setTimeout(function () {
var pausePlay = document.getElementById("pause-container").ej2_instances[0];
pausePlay.annotations[0].content = "<div id="point1" style="font-size:20px;font-weight:bold;color:#ffffff;fill:#ffffff"><span>60%</span></div>";
pausePlay.dataBind();
}, 2000);
}
</script>