ASP.NET AJAX Progress Indicator with Live Search Functionality - YUI Style
by David Hayden ( Florida Web Developer ), Filed: ASP.NET 3.5
I needed to add an ASP.NET AJAX Progress Indicator to a search page when doing real-time search functionality with the Search Bundle in the WCSF v2.0. The Search Bundle has an example of using the UpdateProgress Control, but I wanted to have the progress indicator to be on top of the GridView like you see with most 3rd party controls as opposed to off to the side like done in the Search Bundle QuickStart.
The search engine Gods somehow led me to Matt Berseth's blog, which is an excellent blog on ASP.NET and AJAX. I really liked some of his YUI GridView CSS Styles as well as the YUI Style AJAX Progress Indicator, so I snagged all his hard work while making a few code changes myself.
Here is what I wanted and Matt's tutorial above has a really good discussion on it. Here is a modified version of the Search Bundle QuickStart with the changes:
The cool part is that the progress indicator appears in the middle of the GridView as opposed to somewhere else on the page. I also dig the YUI Style AJAX Progress Indicator:
Here is the gif showing the animation:
Matt is using the UpdatePanelAnimationExtender and displaying and hiding the panel during the OnUpdating and OnUpdated Events. I decided not to use the UpdatePanelAnimationExtender and instead hooked into the PageRequestManager's initializeRequest and endRequest Events to accomplish the same thing without the UpdatePanelAnimationExtender. It works great, but I need to do a bit more testing as well as try out the UpdatePanelAnimationExtender to see what it offers.
You get this functionality for free with 3rd party ASP.NET AJAX UI Components, but it is pretty cool to roll it yourself with a little Javascript code. Check out Matt's blog post for some code snippets as well as a download.
Other ASP.NET AJAX Resources: