Joe Levi:
a cross-discipline, multi-dimensional problem solver who thinks outside the box – but within reality™

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):

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:
<a href="" onclick="return false;"><%# Eval("Title") %></a>
<%# Eval("Body") %>

Don’t forget to close your Accordion control: </ajaxToolkit:Accordion>


You may also like...

17 Responses

  1. VJ says:

    thx, it works.

    but is it possible to run the accordion control inside the tab container?

    for example



    A little content

  2. Elizabeth says:

    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.

  3. Joe says:

    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.

  4. Elizabeth says:

    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.

  5. amir says:

    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

  6. Hermiod says:

    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.

  7. jack says:

    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 is only viewed when the page is build by
    pressing ctrl+f5..

    i m

  8. David says:

    Thanks Joe
    It’s exactly what i was looking for, and it is insanely easy as you just described.

  9. sbc says:

    I did it. but when i try to bind data in following way(Do not use DataSourceID):

    Accordion1.DataSource = GetDataTable();

    it doesn’t work. func GetDataTable() return a DataTable. What was wrong? please reply by email if you can.

    Thank for support!

  10. Jay says:

    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.

  11. Ed says:

    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!

  12. Alastair says:

    Convert the data table to a DataView before binding:

    DataView dvData = dtData.DefaultView;

    myAccordion.DataSource = dvData;

  13. paul says:

    how to use accordion panel without using databinding,but working with database??

  14. Steve says:

    I would like to be able to have text boxes in the accordion and use it for editing. Does the accordion support 2 way data binding?

Leave a Reply