ASP.NET AJAX ProgressBar Control - v0.2

I am still playing around with the ProgressBar control I blogged about a few weeks ago.  I recently updated it to include a handful of few new features and two new skins -below is a quick run down of what has changed.  I am pretty happy with how the control works in IE and Opera, but the Continuous mode animation is a little choppy in FF - I still need to get that figured out.

Live Demo (IE6, IE7, FF, Opera) | Download

 

New Skins

Like I mentioned in my earlier post - I wanted to make sure I could easily apply new skins to the progress control without rewriting the thing.  And I am pretty happy with how this has turned out so far.  I had 8 total skins in the original post and I have just created 2 more.  The first one is very similar to Vista's progress bar and the one below that is fairly close to what the Safari browser uses.

image

image 

 

Custom ToolTips

The AjaxControlToolkit's Slider control has a pretty useful tooltip feature that I incorporated into the ProgressBar control.  The Slider allows you to specify the desired tooltip using a string format and the control will automatically replace all '{0}' tokens within the tooltip with the Slider's current value. 

So I added similar functionality to my ProgressBar control and it works in exactly the same way.  The ProgressBar has a ToolTip property (it actually inherits it from the WebControl base class).  And you can set the value of this property to either a constant string - something like 'Updating ...' and you will see the string displayed as a tooltip ...

image

... or if you use the '{0}' token, every occurrence of it will be replaced with the ProgressBar's current value.  So if you set the ToolTip property to '{0}% - abc '{0}%' - you will see something like this ...

image

The demo page has a section where you can test this out.

image

 

Custom Status Text

I added a StatusText property to the ProgressBar that works in a similar fashion.  You can set it to some constant value and that is what will always be displayed, but if you include the '{0}' token the value will be substituted with the ProgressBar's value.  Again, check out the demo to test how this works.

image  

 

Initial Value Animation

I also added a property that allows you to control whether the ProgressBar uses animation when setting the initial value.  When the Animate property is set to true, the progress control will run the animation that takes the value from 0 to what ever the initial value is.  When this value is false, no animation is run.

image

 

DataTable Integration

And finally I created a small sample that uses the ProgressBar control within the ItemTemplate of a ListView.  The demo for this sample allows you to choose if you want the ProgressBar to animate from 0 to the initial value or not. 

image

And of course you can set the value of the ProgressBar within the ListView's ItemTemplate using the usual data binding syntax.

image

 

That's it.  Enjoy!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/125

Listed below are links to weblogs that reference ASP.NET AJAX ProgressBar Control - v0.2:

» ASP.NET AJAX ProgressBar Control - v0.2 from DotNetKicks.com
You've been kicked (a good thing) - Trackback from DotNetKicks.com [Read More]

Comments


Posted by: NMyVision on June 3, 2008 12:00 AM

Are you going to add the behaviorid attribute? The $find doesnt work for me, i had to use the $get(). This is GREAT control, thanks for posting it!

Posted by: NMyVision on June 3, 2008 12:00 AM

Disgard my last message. $find still doesnt work but obviously neither will $get.

Posted by: NMyVision on June 3, 2008 12:00 AM

Hey Matt, sorry for the many comments. i had to use with the $find. Looking through the code if you dont set the behavior id it defaults to the clientid. I tried adding BehaviorID to the control using the same logic that ajaxtoolkit does but i got a js error. i didnt have time to really look into i though. just wanted to let u know incase you or someone else runs into this.

Posted by: Mike Berlin on June 10, 2008 12:00 AM

Is there a way that I can hook this up to a file upload control? This would be a great benefit to show users how much longer they have to wait for their large files to upload to the server.

Posted by: hamza on June 16, 2008 12:00 AM

thank you for this bautiful progress bar

Posted by: chris on October 28, 2008 11:55 PM

Is there any functionality built in to trigger via C# code instead of javascript? It seems such an awesome control and then no way to start and stop from codebehind without entering into javascript

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • chris wrote: Is there any functionality built in to trigger via C# code instead of javascript? It seems such an a...
  • hamza wrote: thank you for this bautiful progress bar ...
  • Mike Berlin wrote: Is there a way that I can hook this up to a file upload control? This would be a great benefit to s...
  • NMyVision wrote: Are you going to add the behaviorid attribute? The $find doesnt work for me, i had to use the $get()...
  • NMyVision wrote: Disgard my last message. $find still doesnt work but obviously neither will $get. ...
  • NMyVision wrote: Hey Matt, sorry for the many comments. i had to use with the $find. Looking through the code if you...