Creating an AJAX Accordion Menu

• Download source code - 935 KB

Introduction

AJAX is a powerful addition to ASP.NET that provides new functionalities in a simple and agile way. This post is dedicated to creating a menu with the AJAX Accordion control.

About the control

The basic idea of this control is to provide a series of panels and show and hide information inside these panels. The use is very simple: we have to set each panel inside an Accordion control and give to each panel a header, and of course, we have to set the content of each panel.

To use accordion control, u need the ajax control toolkit.

Basic properties of the Accordion control

Before start developing using the Accordion control, we have to know the basic properties for this control:

Other Accordion properties

• FramesPerSecond - Number of frames per second used in the transition animations.
• RequireOpenedPane - Prevents closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.
• SuppressHeaderPostbacks - Prevents the client-side click handlers of elements inside a header from firing (this is especially useful when you want to include hyperlinks in your headers for accessibility).
• DataSource - The data source to use. DataBind() must be called.
• DataSourceID - The ID of the data source to use.
• DataMember - The member to bind to when using a DataSourceID.

AJAX Accordion Control Extender DataSource

The Accordion Control Extender of the AJAX Control Toolkit can also be used as a DataBound control. You can bind the data retrieved from the database to the Accordion control. The Accordion control consists of properties such as DataSource and DataSourceID (see above) that can be used to bind data. The HeaderTemplate can used to display the header or title for the pane generated by the Accordion control, a click on which will open or close the ContentTemplate generated by binding the data with the Accordion Extender.

When DataSource is passed to the Accordion control, we use the DataBind method to bind the data. The Accordion control bound with data auto generates the expand/collapse panes along with their headers.

This code represents the basic steps to bind the Accordion to a data source:

Public Sub getCategories()
    Dim sqlConn As New SqlConnection(conString)
    sqlConn.Open()
    Dim sqlSelect As New SqlCommand("SELECT * FROM Categories", sqlConn)
    sqlSelect.CommandType = System.Data.CommandType.Text
    Dim sqlAdapter As New SqlDataAdapter(sqlSelect)
    Dim myDataset As New DataSet()
    sqlAdapter.Fill(myDataset)
    sqlConn.Close()

    Accordion1.DataSource = myDataset.Tables(0).DefaultView
    Accordion1.DataBind()

End Sub

Protected Sub Accordion1_ItemDataBound(sender As Object, _
          e As AjaxControlToolkit.AccordionItemEventArgs)
    If e.ItemType = AjaxControlToolkit.AccordionItemType.Content Then
        Dim sqlConn As New SqlConnection(conString)
        sqlConn.Open()
        Dim sqlSelect As New SqlCommand("SELECT productName " & _ 
            "FROM Products where categoryID = '" + _
            DirectCast(e.AccordionItem.FindControl("txt_categoryID"),_
            HiddenField).Value + "'", sqlConn)
        sqlSelect.CommandType = System.Data.CommandType.Text
        Dim sqlAdapter As New SqlDataAdapter(sqlSelect)
        Dim myDataset As New DataSet()
        sqlAdapter.Fill(myDataset)
        sqlConn.Close()

        Dim grd As New GridView()

        grd = DirectCast(e.AccordionItem.FindControl("GridView1"), GridView)
        grd.DataSource = myDataset
        grd.DataBind()
    End If
End Sub

In the above code, we did two things: first, we made a SQL select to a database to retrieve all the data from the Categories table. This data will be used to set the header and columns of the accordion.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<ajaxToolkit:Accordion
   ID="Accordion1" runat="server" TransitionDuration="100" 
   FramesPerSecond="200" FadeTransitions="true" RequireOpenedPane="false" 
   OnItemDataBound="Accordion1_ItemDataBound"
   ContentCssClass="acc-content" HeaderCssClass="acc-header" 
   HeaderSelectedCssClass="acc-selected">
    <HeaderTemplate>
      <%#DataBinder.Eval(Container.DataItem,"categoryName") %>
    </HeaderTemplate>
    <ContentTemplate>
      <asp:HiddenField ID="txt_categoryID" runat="server" 
          Value='<%#DataBinder.Eval(Container.DataItem,"categoryID") %>' 
     />
   <asp:GridView ID="GridView1" runat="server" 
         RowStyle-BackColor="#ededed" RowStyle-HorizontalAlign="Left"
         AutoGenerateColumns="false" GridLines="None" CellPadding="2" 
         CellSpacing="2" Width="300px">
<Columns>
   <asp:TemplateField 
       HeaderStyle-HorizontalAlign="Left" HeaderText="Product Name" 
       HeaderStyle-BackColor="#d1d1d1"
       HeaderStyle-ForeColor="#777777">

<ItemTemplate>
  <%#DataBinder.Eval(Container.DataItem,"productName") %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</ajaxToolkit:Accordion>

Here, we use <%#DataBinder.Eval(Container.DataItem,"categoryName") %> to bind the accordion header with the category name, so we made one header for each element found on the database.

Creating a basic accordion control

As we know, to use any of the AJAX components, there must be a registered ScriptManager in our site which will be responsible for managing our controls. So the first thing we will do is create our script manager.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager> 

Then we define our accordion element and establish some basic properties:

<cc1:Accordion ID="AccordionCtrl" runat="server"
        SelectedIndex="0" HeaderCssClass="accordionHeader"
        ContentCssClass="accordionContent" AutoSize="None"
        FadeTransitions="true" TransitionDuration="250"
        FramesPerSecond="40"

For our work, we must declare Panes accordion inside it, these breads will be responsible for containing links or information that we want to show.

<Panes>
    <cc1:AccordionPane ID="AccordionPane0" runat="server">
        <Header>Matenimiento</Header>
        <Content>
            <li><a href="mypagina.aspx">My página de prueba</a></li>
        </Content>
    </cc1:AccordionPane>

To end this work, we have to close all the panels and our accordion.

</Panes>
</cc1:Accordion>

Finally, the finished example

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<cc1:Accordion ID="AccordionCtrl" runat="server"
        SelectedIndex="0" HeaderCssClass="accordionHeader"
        ContentCssClass="accordionContent" AutoSize="None"
        FadeTransitions="true" TransitionDuration="250"
        FramesPerSecond="40">

    <Panes>
        <cc1:AccordionPane ID="AccordionPane0" runat="server">
            <Header>Matenimiento</Header>
            <Content>
                <li><a href="mypagina.aspx">My página de prueba</a></li>
            </Content>
        </cc1:AccordionPane>
    </Panes>
</cc1:Accordion>