Dynamic ASP.NET Ajax Accordion Control

In this post we will take a look at the accordion control. The Accordion control is a part of the AJAX Control Toolkit which comes as a separate bundle to be used with ASP.NET AJAX.


Accordion Control

An accordion control represents a group of panels where only one panel is selectable at a time. Each panel consists of a header and content template. According to ASP.NET AJAX Website “An Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time”.

There are different properties of an accordion which control its look and feel. These properties include:

SelectIndex: Specifies the pane to be selected
FadeTransitions: A boolean value which adds or removes a transition effect to a pane
TransitionDuration: Specifies the time of transition. This is in milliseconds
RequiredOpenPane: A boolean value which always keeps one pane open
DataSourceID: Specifies the data source for building data-bound control


Data-Binding with Accordion Control

An accordion control can display both static and dynamic data. When displaying static data, an accordion uses the <Pane> template. Each pane consists of an <AccordionPane> which in turn consists of a <Header> and <Content> template.

Listing 1 defines a simple accordion which displays static data using the <Panes> template:

Listing 1

<cc1:Accordion 
     ID="Accordion2" 
     runat="server">
            
     <Panes>
          <cc1:AccordionPane runat="server" ID="AccordionPane1">
              <Header>First</Header>
              <Content>This is the Firt Content Pane </Content>
          </cc1:AccordionPane>
          <cc1:AccordionPane runat="server" ID="AccordionPane2">
              <Header>Second</Header>
              <Content>This is the Second Content Pane </Content>
          </cc1:AccordionPane>
          <cc1:AccordionPane runat="server" ID="AccordionPane3">
              <Header>Third</Header>
              <Content>This is the Third Content Pane </Content>
          </cc1:AccordionPane>
     </Panes>                    
</cc1:Accordion> 

To build a dynamic accordion control, two points are important. One is to use the DataSourceID property (which is a standard property of most of the ASP.NET Controls) and second is to use the <HeaderTemplate> and <ContentTemplate>. The function of each of these templates is pretty obvious from their names.

Listing 2 shows a dynamically created accordion control which displays data from the Northwind Database:

Listing 2

<cc1:Accordion 
            ID="Accordion1" 
            runat="server"
            FadeTransitions="true"
            AutoSize="Fill"
            SelectedIndex="0" 
            RequireOpenedPane="false"
            TransitionDuration="250"
            DataSourceID="SqlDataSource1"
            Width="500">
            
            <HeaderTemplate>
                <b><%#DataBinder.Eval(Container.DataItem, "CustomerID")%></b>                
            </HeaderTemplate>
                    
            <ContentTemplate>
                <table border="1" cellpadding="4" cellspacing="0" width="100%">
                    <tr>
                        <td width="10%" align="right" class="style1">
                            <b>Company:</b>
                        </td>
                        <td width="90%" class="style1">
                            <%#DataBinder.Eval (Container.DataItem, "CompanyName")%><br />
                        </td>
                    </tr>
                    <tr>
                        <td width="10%" align="right" class="style1">
                            <b>Contact: </b>
                        </td>
                        <td width="90%" class="style1">
                            <%#DataBinder.Eval (Container.DataItem, "ContactName")%><br />
                        </td>
                    </tr>    
                    <tr>
                        <td width="10%" align="right" class="style1">
                            <b>Address: </b>
                        </td>
                        <td width="90%" class="style1">
                            </b><%#DataBinder.Eval (Container.DataItem, "Address")%><br />
                        </td>
                    </tr>
                    <tr>
                        <td width="10%" align="right" class="style1">
                            <b>City: </b>
                        </td>
                        <td width="90%" class="style1">
                            <%#DataBinder.Eval (Container.DataItem, "City")%><br />
                        </td>                    
                    </tr>
                    <tr>
                        <td width="100%" colspan="2" align="right" class="style1">
                            <b><a href="edit.aspx?CustomerID=<%#DataBinder.Eval(Container.DataItem, "CustomerID")%>">Edit</a></b>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
                    
</cc1:Accordion> 

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"             
            SelectCommand="SELECT TOP (10) [CustomerID], [CompanyName], [ContactName], [Address], [City] FROM [Customers]">
</asp:SqlDataSource> 

Summary

The Accordion control comes with ASP.NET AJAX Control Toolkit. An accordion can consists of multiple panes where each pane consists of a header and content template.

An accordion control has different properties. Many of the properties are used to control the way a pane is rendered or hidden. These properties add animation effects to a pane transition. A data source property also exits to bind an accordion control to a data source.

An accordion can bind to static or dynamic data. For static data, the <Panes> template is used. To dynamically bind the data, the </HeaderTemplate> and <ContentTemplate> are used.