Edit this page

ProgressBar HtmlHelper Overview

The ProgressBar HtmlHelper extension is a server-side wrapper for the Kendo UI ProgressBar.

It allows you to configure the Kendo UI ProgressBar widget from server-side code. The ProgressBar offers rich functionalities for displaying and tracking the progress of a task. It supports multiple types, horizontal and vertical orientation, and also different directions.

For more information on the HtmlHelper, refer to the article on the ProgressBar HtmlHelper for ASP.NET MVC.

Basic Usage

The following example demonstrates how to define the ProgressBar by using the ProgressBar HtmlHelper.

Example
   @(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>

Configuration

The following example demonstrates the basic configuration of the ProgressBar HtmlHelper and how to get the ProgressBar instance.

    @(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");
        })
    )

    <script type="text/javascript">
        $(function () {
            //Notice that the Name() of the ProgressBar is used to get its client-side instance.
            var progressbar = $("#progressbar").data("kendoProgressBar");
            console.log(progressbar);
        });
    </script>

See Also