Making an Ajax Toolkit CollapsiblePanelExtender work with a DataList

So I've been working on the web site for .NET University, a site devoted to helping folks train up on .net 3.0, which is the brainchild of my Atlanta counterpart, Doug Turnure. One of Doug's great community guys, Brendon Schwartz, created a nice HTML template for the site, and I spent a few hours this week implementing the site in ASP.NET 2.0, including using Master Pages for layout, some databinding for easier updates, etc.

For fun (and practicality), I also decided to use our new ASP.NET AJAX framework on a couple of the pages. Specifically, I used an UpdatePanel to make an input form more responsive, and added a CollapsiblePanelExtender (from the ASP.NET AJAX Control Toolkit) on the Attend a Course page to make the most out of the available screen real estate as we add more courses.

I subsequently discovered, however, that while the CollapsiblePanelExtender worked great on a regular page (once I grasped how it was implemented), I was having trouble getting it to work within the ItemTemplate of a DataList control (for the list of courses, I'm using a simple XML file, bound to a DataList via an XmlDataSource control, using XPath for displaying the data, a technique I've also used with RSS feeds, as I wrote about here). I could get the panel that was supposed to initiate the expand/collapse behavior to display, but nothing happened when I clicked on it.

I did a little hunting around online, but didn't immediately find a solution, so I pinged one of the folks I know on the team responsible for the AJAX framework, and he suggested adding a call to Page.DataBind in the Page_Load event for the page. BINGO! That did the trick.

I should note that I'm using the Beta 1 release. If you experience a similar problem, give the DataBind call a try, and see if it helps. You can see the page where I'm using this control extender here:

Skip to main content