Pages

Wednesday, June 24, 2009

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.

8 comments:

  1. thank you Kashif Ahmad..
    its really help me....

    ReplyDelete
  2. if i want parent and child data to bind then plz confirm me

    ReplyDelete
  3. THANK ALOT MY DEAR FRIEND
    REGARDS, HAFEEZ

    ReplyDelete
  4. Susmitha, following links may be of interest to you:

    http://www.craigweston.ca/?p=108
    http://jlchereau.blogspot.com/2007/09/nesting-ajax-control-toolkit-accordion.html

    I thank you all for the appreciation...

    ReplyDelete
  5. Thank You Very very much...........
    This really helped me........

    ReplyDelete
  6. assalmualikum kashif i want bind data to accordion control in c# code behind so where i need to write code i have records(10) in database i want to display 8 records in header7 content of accordion where i write code to bind data

    ReplyDelete
  7. wow.............what a great article...............thanks bro

    ReplyDelete
  8. i ,

    I want to create a Menu Control in asp.net, which is placed in the left pane of my UI Screen.

    I need this menu control with Collapsible and Expand Menu feature, That is,


    Main Menu-1
    Sub Menu-1
    Sub Menu-2
    Main Menu-2
    Sub Menu-1
    Sub Menu-2

    From Above Shown data, When I click 'Main Menu-1', its child items 'Sub Menu-1' & 'Sub Menu-2' should expand, If I click 'Main Menu-2' it should expand its child items and 'Main Menu-1' should be collapsed.

    That is, Similarly to Ajax:Accordian Control.

    With this menu control, i need to show/hide some of the Menu Items based on User Roles, Say for Example, Executive Role Can have access to only Main Menu-1 and Admin can have access to all Menu Items.

    Can Please suggest me a better idea to do this.

    Thanks in advance.
    Dineshkumar Ramakrishnan.

    ReplyDelete