Tag Archives: WebProgressbar

Page Index Indicator Using WebProgressBar

In the 2010 R1 release, Intersoft introduces a new ASP .NET collection control under the WebEssentials banner. One of the controls in the collection is WebProgressBar. Further information about WebEssentials can be found here.

In this post, I will show how to use WebProgressBar to indicate the page index in a paged form scenario.

The following screenshots show page index information in a paged form using WebProgressBar.

You can achieve such scenario with WebProgressBar in several simple steps. The basic idea is to customize the Mode and Orientation property of the WebProgressBar, and provide a client side event to update the WebProgressBar’s Value with the latest page index.

For your information, I have provided a working sample which you can download at the end of this post.

Now, let us start customizing the progress bar.

  • Customize the Mode property
    I am going to set the Mode property to Determinate with MaxValue property is set to the number of page in the form. I will also set the Value property of the progress bar to the initial page index value. In this sample, I set the MaxValue property to 4 and Value property to 1

    <ISWebEssentials:WebProgressBar ID="ProgressBar1" runat="server"
    Mode="Determinate" Value="1" MaxValue="4" DefaultStyleMode="Default">
  • Customize the Orientation property
    Since, we would like to show the progress bar in vertical position, let us set the Orientation property of the progress bar to Vertical.
  • Update the Value property in GoPrev and GoNext client side method
    As the page index changed, we also need to update the value of the progress bar. You can update the value programmatically in the client side event using SetValue client side API. In this sample, I am going to update the progress bar value during page transition client side method.

    function GoPrev() {
    	if (curPage > 1) {
    		curPage -= 1;
                    var progBar = ISGetObject("ProgressBar1");

Once you have finished configuring the WebProgressBar, you will get something similar to the above screenshot.

In summary, I have discuss some WebProgressBar features such as mode, orientation, and client side API which you can use to indicate the page index in a paged form scenario. For further information about WebProgressBar features, visit WebProgressBar web page here.

As mentioned earlier, you can download the working sample here.

You can also explore other WebProgressBar features in the online demo here.


Glenn Layaar
Intersoft Member

Using WebProgressBar as Busy Indicator

The recent WebUI Studio 2010 release shipped with a host of innovative controls for the Silverlight, WPF and ASP.NET platform. One of the new controls for ASP.NET is WebProgressBar, which is part of WebEssentials product suite. WebEssentials includes 8 rich ASP.NET controls, which you can learn more here.

In this post, I will blog about WebProgressBar and how it can be used as a busy indicator in your ASP.NET application.

As its name implies, WebProgressBar is used to show a progress of a long running operation. One of the unique features in WebProgressBar is its ability to show progress bar in indeterminate mode. For example, consider a scenario where you have an editing form with a save button and you would like to show progress indicator when the save operation is in progress such as shown in the following illustration.

Sample Result

To achieve the result such as shown above, I am going to demonstrate several key features of WebProgressBar, such as predefined theme, event handling, orientation, and progress mode. In this demonstration, the saving progress is simulated using .NET threading and ASP.NET session.

I will only focus on detailing the WebProgressBar feature required to achieve the result. A download link to download the working sample is available at the end of this post.

The following settings are applied to the WebProgressBar control to achieve the result that similar to the above image.

  • Predefined Theme
    WebProgressBar in the screenshot is using Office2007 theme.
  • Mode
    The Indeterminate mode is used since the exact time and progress of the saving process cannot be determined in this scenario.
  • Orientation
    The WebProgressBar is using Horizontal orientation.
  • Event Handling
    Multiple event handlers must be used to achieve the desired result, both in the client side and in the server side. 
    1. Handling ProgressInterval Server-side Event
      Periodically check if the saving process has been completed in the server side. If the process is completed set the value of the WebProgressBar to MaxValue (default is 100) to indicate the progress has been completed.
      protected void ProgressBar1_ProgressInterval(object sender,
        ISNet.WebUI.WebEssentials.WebProgressBarProgressIntervalEventDataArgs e){   if (int.Parse(Session["SimulatedVal"].ToString()) >= maxValue){     e.Value = 100;   }
    2. Handling OnResponse Client-side Event

      Invoked after the WebProgressBar sent a request to the server, in this implementation I am updating the WebProgressBar caption with the elapsed time after each successful requests determined by the ProgressInterval property.


      function ProgressBar1_OnResponse(controlId, action, xmlResp) {
      var progBar = ISGetObject(controlId);
        if (action == "OnProgressInterval") {
          if (progBar.GetCaptionElement() != null) {
            var current = new Date();
            var currentTime = Date.UTC(current.getFullYear(), current.getMonth(), current.getDate(),
            current.getHours(), current.getMinutes(), current.getSeconds(), current.getMilliseconds());
            var elapsedTime = currentTime - progBar.StartTime;
            progBar.SetCaption("Elapsed time: " + (elapsedTime / 1000).toFixed(2) + " second(s)");
    3. Handling OnFinished Client-side Event

      This client side event is implemented to set the status label of WebProgressBar with the amount of time needed to finish the process. The amount of time could be obtained from the StartTime and EndTime property of the WebProgressBar control.


      function ProgressBar1_OnFinished(controlId, endTime, value, caption) {
        var progBar = ISGetObject(controlId);
        var duration = progBar.EndTime - progBar.StartTime;
        progBar.Value = 0;
        document.getElementById("lblStatus").innerHTML = "Save complete in " +
          (duration / 1000).toFixed(2) + " second(s)";

In summary, I have explained some of the key features available in WebProgressBar which is useful to show busy indicator for a long running process. The features that discussed in this post are predefined theme, mode, orientation, and event handling. To learn more about WebProgressBar and its features, please visit WebProgressBar product page. As promised earlier, the sample for this post can be downloaded here.

You can also try more WebProgressBar examples in different scenarios here. If you have question or feedback about this post or anything related to WebProgressBar control, feel free to post it to Intersoft community forum.

Glenn Layaar

Intersoft Member