ASP.NET AJAX Control Toolkit’s Accordion Control: Databinding
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: <asp:scriptmanager ID="Scriptmanager1" runat="server" />
Next, set up your Accordion control (note the reference to the DataSourceID that you defined earlier):
<ajaxToolkit:Accordion
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:
<Panes>
</Panes>
And lastly, the insanely easy part, define your databindings in the HeaderTemplate and ContentTemplate:
<HeaderTemplate>
<a href="" onclick="return false;"><%# Eval("Title") %></a>
</HeaderTemplate>
<ContentTemplate>
<%# Eval("Body") %>
</ContentTemplate>
Don’t forget to close your Accordion control: </ajaxToolkit:Accordion>
Posted in Joe, Web Development
July 23rd, 2007 at 02:46
thx, it works.
but is it possible to run the accordion control inside the tab container?
for example
Booking
hello
A little content
July 23rd, 2007 at 10:28
[...] one of my readers, in response to another article, asked about being able to nest an Accordion Control within a Tab Container. In [...]
July 23rd, 2007 at 10:37
VJ, yes, in fact, one can run an Accordion Control within a Tab Container: http://www.joelevi.com/blog/index.php/2007/07/23/microsoft-aspnet-ajax-control-toolkit-accordion-panels-in-a-tab-container/
September 19th, 2007 at 03:10
I’ve just implemented this using Visual Web Developer 2005 Express Edition inside a tab container and it works beautifully so thanks for that. One thing I did notice was, when I move from Code view to Design view and then navigate to the tab with your code in it, it deletes everything inside the accordion, so I lose all of the functionality. It’s a bizarre little bug, it’s probably because I’m using Express rather than the full version but then our company doesn’t make big bucks so the IT department can’t afford the super-duper full version for everyone. Just thought I’d let you know about this odd little side-effect.
September 19th, 2007 at 09:50
Elizabeth, that’s a strange behavior. Are you certain that when you toggle from code view to design view that it’s actually deleting the contents of the Accordion control and not just “hiding the contents?
In other words, if you switch back to code view is it actually gone?
I’ve noticed on the Accordion and (the older version of the) Tab Container controls that the design view implementation shows only the control, not the contents of it (which makes it a bugger to work in visually). Fortunately the contents have still been “there” and accessible in the code view — at least in VS Standard and VS Professional.
Let us know if VS Express is different.
- http://www.JoeLevi.com
September 19th, 2007 at 10:25
I’m very sure that it’s deleting the contents. I did a test. I saved my project in code view to make sure the code was all there then switched to design view, moved to the tab with the accordion in and the file showed that a change had been made and it required saving again. So I switched back to code view and the contents of the accordion was gone.
October 11th, 2007 at 01:06
I have an accordion built exactly as you posted
but i now need away to access the controls inside the contenttemplate
through javascript
if anyone knows please respond
thanks in advance
November 22nd, 2007 at 04:06
Will this solution work if there are multiple instances of ‘body’ within the datasource.
One big hurdle that I’ve hit with the accordion is that it will only show the first instance of a dataItem in the rather than all of them. This has buggered me up while trying to use the Accordion as a menu running from an XML DataSource.
It seems I am not the only one who has struggled with this problem and I haven’t yet been able to find a solution.
January 17th, 2008 at 23:10
i have created my own user registration form.since the form is very long,i went to go for the ajax tab control to organise my form data.but i am not able to save my data
inside the tab container into the sql database.can anyone help me with this problem. how can i bind my controls inside the tab container to my columns in the sql database..
and why tab control doesnot show the controls in the design time..well only thing i can do is go through the source code and add textbox,label etc.
but it doesnot show in design view..it is only viewed when the page is build by
pressing ctrl+f5..
i m lost..help..
May 26th, 2008 at 08:07
Thanks Joe
It’s exactly what i was looking for, and it is insanely easy as you just described.
August 3rd, 2008 at 01:04
Hi.
I did it. but when i try to bind data in following way(Do not use DataSourceID):
Accordion1.DataSource = GetDataTable();
Accordion1.DataBind();
it doesn’t work. func GetDataTable() return a DataTable. What was wrong? please reply by email if you can.
Thank for support!
August 18th, 2008 at 10:14
I’m having the same problem as ‘bc’, I can’t get it to work if I databind from code behind. Let me know if you have found a solution to that.
October 3rd, 2008 at 05:26
And another — I too can’t get it to work if I do the data-binding in code. Is there a way to do this? Please help!