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. 
  
  1 2 3 4 5

  <ISWebEssentials:WebProgressBar ID="ProgressBar1" runat="server"   Mode="Determinate" Value="1" MaxValue="4" DefaultStyleMode="Default">   </ISWebEssentials:WebProgressBar>

• 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.
  
  1 2 3 4 5 6 7 8 9 10 11 12

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

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.

Regards,

Glenn Layaar
Intersoft Member