ProgressBar HtmlHelper Overview

The Telerik UI ProgressBar HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI ProgressBar widget.

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.

Basic Configuration

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.
  2. Create a new action method which renders the view.

    public ActionResult Index()
    {
        return View();
    }
    
  3. Add a ProgressBar.

        <%= Html.Kendo().ProgressBar()
            .Name("progressBar") // The name of the ProgressBar is mandatory. It specifies the "id" attribute of the widget.
            .Type(ProgressBarType.Percent)
        %>
    
        @(Html.Kendo().ProgressBar()
            .Name("progressBar") // The name of the ProgressBar is mandatory. It specifies the "id" attribute of the widget.
            .Type(ProgressBarType.Percent)
        )
    

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

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

To reference an existing ProgressBar instance, use the jQuery.data() configuration option. Once a reference is established, use the ProgressBar client-side API to control its behavior.

// Place this after your ProgressBar for ASP.NET MVC declaration.
<script>
    $(function() {
        // The Name() of the ProgressBar is used to get its client-side instance.
        var progressbar = $("#progressBar").data("kendoProgressBar");
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article