ProgressBar JSP Tag Overview

The ProgressBar JSP tag is a server-side wrapper for the Kendo UI ProgressBar widget.

Getting Started

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI ProgressBar in the Spring MVC framework.

Step 1 Make sure you followed all the steps from the introductory article on Telerik UI for JSP.

Step 2 Create a new action method.

    @RequestMapping(value = {"/", "/index"}, method = RequestMethod.GET)
      public String index() {       
          return "web/progressbar/index";
      }  

Step 3 Add the Kendo UI taglib mapping to the page.

    <%@taglib prefix="kendo" uri="https://www.telerik.com/kendo-ui/jsp/tags"%>

Step 4 Add a progressbar tag.

    <kendo:progressBar name="progressBar" type="percent"></kendo:progressBar>

Event Handling

Subscribe to Events

You can subscribe to all events exposed by Kendo UI ProgressBar by the handler name.

    <kendo:progressBar name="progressBar" type="percent" min="0" max="10" change="onChange" complete="onComplete"></kendo:progressBar>

    <script>
        function onChange(e) {
          // Handle the change event
        }

        function onComplete(e) {
          // Handle the complete event
        }
      </script>

Reference

Existing Instances

You are able to reference an existing ProgressBar instance via jQuery.data(). Once a reference is established, you are able to use the ProgressBar API to control its behavior.

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

See Also

In this article