ASP.NET Core ProgressBar Overview
The ProgressBar is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI ProgressBar TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ProgressBar widget.
The ProgressBar delivers rich functionality for displaying and tracking the progress of a task. It supports multiple types, horizontal and vertical orientation, reversed direction, minimum and maximum values, and animation duration.
Initializing the ProgressBar
The following example demonstrates how to define the ProgressBar.
@(Html.Kendo().ProgressBar()
.Name("progressbar")
.Type(ProgressBarType.Percent)
.Animation(a => a.Duration(600))
)
<script type="text-javascript">
$(document).ready(function () {
$("#progressbar").data("kendoProgressBar").value(50);
});
</script>
<kendo-progressbar name="fastAndFurious" type="ProgressBarType.Percent" animation-duration="600" />
<script type="text-javascript">
$(document).ready(function () {
$("#progressbar").data("kendoProgressBar").value(50);
});
</script>
Basic Configuration
The following example demonstrates the basic configuration of the ProgressBar.
@(Html.Kendo().ProgressBar()
.Name("progressBar")
.Type(ProgressBarType.Chunk)
.ChunkCount(4)
.Min(0)
.Max(4)
.Value(2)
.ShowStatus(true)
.Orientation(ProgressBarOrientation.Vertical)
.Events(e =>
{
e.Change("onChange");
e.Complete("onComplete");
})
.Animation(a =>
{
a.Duration(500);
})
)
<kendo-progressbar name="progressBar" show-status="true" orientation="ProgressBarOrientation.Vertical" type="ProgressBarType.Chunk" animation-duration="600" on-change="onChange" on-complete="onComplete"/>
Events
You can subscribe to all ProgressBar events. For a complete example on basic ProgressBar events, refer to the demo on using the events of the ProgressBar.
Handling by Handler Name
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().ProgressBar()
.Name("progressBar")
.Events(e => {
e.Change("onChange");
e.Complete("onComplete");
})
)
<script>
function onChange(e) {
// Handle the change event.
}
function onComplete(e) {
// Handle the complete event.
}
</script>
<kendo-progressbar name="progressBar" on-change="onChange" on-complete="onComplete"/>
<script>
function onChange(e) {
// Handle the change event.
}
function onComplete(e) {
// Handle the complete event.
}
</script>
Handling by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
@(Html.Kendo().ProgressBar()
.Name("progressBar")
.Events(e => e.Change(@<text>
function() {
// Handle the change event.
}
</text>)
)
)
Referencing Existing Instances
The following example demonstrates how to get a reference to an existing Telerik UI ProgressBar instance. Once the reference is established, use the ProgressBar client-side API to control its behavior.
@(Html.Kendo().ProgressBar()
.Name("progressBar")
)
<script type="text/javascript">
$(function () {
// The Name() of the ProgressBar is used to get its client-side instance.
var progressbar = $("#progressbar").data("kendoProgressBar");
console.log(progressbar);
});
</script>
<kendo-progressbar name="progressBar" />
<script type="text/javascript">
$(function () {
// The Name() of the ProgressBar is used to get its client-side instance.
var progressbar = $("#progressbar").data("kendoProgressBar");
console.log(progressbar);
});
</script>