AJAX Control Toolkit: toggle CollapsiblePanelExtender Animation & change duration

I’ve been following progress on & have been using the AJAX Control Toolkit more or less since it started maturing in 2006. Over the last year, it has grown into a solid collection of useful, easy-to-implement controls, which are used around the world by most people who are developing AJAX-enabled Microsoft ASP .NET web apps. And those who don’t use ’em should 😉

From time to time however, you run into a feature you absolutely need to have, but which isn’t supported by the Toolkit.

One of the requirements for one of the projects I’m working on is being able to show as much tabular data (typically search results) as possible on a page, thus limiting the amount of scrolling required. What we do to reach this goal: we use the CollapsiblePanelExtender on the panel containing the the search criteria. When a user searches for some specific data, the list with criteria is collapsed, leaving more room for the result grid (of course, the user can expand the criteria again & input new ones any time he likes).

At first, we used the CollapsiblePanelExtender for this. One problem: when you collapse or expand a panel, a short animation plays, and there’s no out-of-the-box way to turn this off. Though the animations are great, in this specific case it made the page feel a little “sluggish”. Seeing I’m a sucker for clean (yet quite glossy), fast & user-friendly webpages, a solution had to be found.

So I created my own version of the CollapsiblePanelExtender, the ExtendedCollapsiblePanelExtender (yes, I AM running out of inspiration when it comes to naming these things ;-)). I added two properties: ShowAnimation & AnimationDuration. Default values are true & 250ms respectively, meaning changing your CollapsiblePanelExtenders to this ExtendedCollapsiblePanelExtenders will not change any behaviour as long as you don’t explicitly set the properties to other values.

Obviously, when ShowAnimation is false, the animation doesn’t play. This isn’t the same as hard-coding the duration to a very low value: when you do that, the animation still gets initialized and still plays, albeit very fast. When you set ShoWAnimation to false, the animation doesn’t get initialized and doesn’t play at all (saving you quite some execution time).

While I was at it, I added an AnimationDuration-property as well. By default, the animation plays for 250ms – with this new property, you can let it play as short/long as you want.

Using the ExtendedCollapsiblePanelExtender is as easy as using any Toolkit control: just add an assembly reference to your project, register the assembly on the page, and use it like any other control.

I uploaded the source code of this extender, including a small demo webapp to show you how to use it in your projects. Feel free to have a look at the source (comments are included), modify it, or simply use the extender on your own webapps. Download here, enjoy!

(note: the source is built on .NET 3.5, for use with Visual Studio 2008, using the latest version of the AJAX Control Toolkit (February 2008 version). But if for some reason you need a version for .NET 2.0, you can easily design it using the provided sources.)