ASP.NET AJAX Control Toolkit's Accordion Control: Databinding

· Articles

I have two pages that dynamically load title and content data on a page for press releases and similar data. Today when attempting to present this data using ASP.NET AJAX Control Toolkit's Accordion Control I ran into a bit of a headache.

It turns out that it's both "tricky" and "insanely easy" to databind the accordion control. Here's how:

First, define your datasource and note your DataSourceID, you'll need that later.

Next, make sure you have declared the AJAX Script Manager on the page (above the accordion control), like so:

Next, set up your Accordion control (note the reference to the DataSourceID that you defined earlier):
ID="MyAccordion"
runat="Server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"
AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
DataSourceID="SqlDataSource1">

Next, and this is the somewhat tricky part, drop in an empty Panes tag:


And lastly, the insanely easy part, define your databindings in the HeaderTemplate and ContentTemplate:

<%# Eval("Title") %>


<%# Eval("Body") %>

Don't forget to close your Accordion control:

← All articles