Edit this page

ProgressBar HtmlHelper Overview

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

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI ProgressBar.

  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.

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

    Example
    
                <%= 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)
                )
    

Event Handling

You can subscribe to all ProgressBar events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example

            <%= 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>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Example

            @(Html.Kendo().ProgressBar()
                  .Name("progressBar")
                  .Events(e => e.Change(@<text>
                          function() {
                              //Handle the change event.
                          }
                      </text>)
                  )
            )

Reference

Existing Instances

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

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

See Also