Getting Started with the ProgressBar

This tutorial explains how to set up the Telerik UI for ASP.NET MVC ProgressBar and goes through the steps in the configuration of the component.

You will declare a ProgressBar component. Next, you will set a default value and configure how the ProgressBar displays the achieved progress. Then, you will learn to handle the JavaScript events of the ProgressBar and to access a client-side reference of the component.

After completing this guide, you will achieve the following results:

Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET MVC components:

• To create a new pre-configured project for the Telerik UI for ASP.NET MVC components, you can use a project template.

• To manually configure an existing project by using NuGet, see the Adding Telerik UI through NuGet.

1. Prepare the CSHTML File

The first step is to add the required directives at the top of the .cshtml document:

• To use the Telerik UI for ASP.NET MVC HtmlHelpers:

  @using Kendo.Mvc.UI
  

Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.

2. Initialize the ProgressBar

Use the ProgressBar HtmlHelper to configure the component.

• Use the Name() configuration method to assign a name to the instance of the helper—this is mandatory as its value is used for the id and the name attributes of the ProgressBar element.
• Configure the Type of the ProgressBar. The available configurations are Value, Percent, and Chunk.
• Set the initial Value.

    @using Kendo.Mvc.UI

    <div id="example">
        <label>Shipment Progress </label>
        @(Html.Kendo().ProgressBar()
            .Name("shipment")
            .Type(ProgressBarType.Percent)
            .Value(30)
        )
    </div>

3. Handle the ProgressBar Events

The ProgressBar exposes events that you can handle and trigger specific actions. In this tutorial, you will use the Complete Event of the ProgressBar.

    @using Kendo.Mvc.UI

    <div id="example">
        <label>Shipment Progress </label>
        @(Html.Kendo().ProgressBar()
            .Name("shipment")
            .Type(ProgressBarType.Percent)
            .Value(30)
            .Events(e=>e.Complete("onComplete"))
        )
    </div>

    function onComplete(e){
        alert("Your shipment has arrived!")
        // use the e.value property to access the current value of the ProgressBar
    }

(Optional) Reference Existing ProgressBar Instances

Referencing existing component instances allows you to build on top of their configuration. To reference an existing ProgressBar instance, use the jQuery.data() method. Once a reference is established, use the ProgressBar client-side API to control its behavior.

1. Use the id attribute of the component instance to establish a reference.

   <script>
       var progressbarReference = $("#progressbarExample").data("kendoProgressBar"); // progressbarReference is a reference to the existing instance of the helper.
   </script>
   

2. Use the ProgressBar client-side API to control the behavior of the widget. In this example, you will see how to adjust the value of ProgressBar programmatically.

       <script>
           var progressbar = $("#shipment").data("kendoProgressBar");      
           progressbar.value(35);
       </script>
   

Next Steps

• ProgressBar Events
• Chunk ProgressBar (Demo)
• Vertical ProgressBar (Demo)

See Also

• Using the API of the ProgressBar for ASP.NET MVC (Demo)
• Client-Side API of the ProgressBar
• Server-Side API of the ProgressBar
• Knowledge Base Section