AJAX Accordion Control Extender DataSource

The Accordion Control extender of AJAX Control toolkit can also be used as DataBound control. You can bind the data retrieved from the database to the Accordion control. Accordion Control consists of properties such as DataSource and DataSourceID that can be used to bind the data. 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 Accordion extender.

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

You can use DataBinder.Eval method to display the DataItems in the Header of Content Template of the control.

Sample Code for Accordion Control DataSource

In this example code you will learn the use of GridView control inside the ContentTemplate of the Accordion control. We will use the default Northwind database to bind the categoryName as Header in the Accordion HeaderTemplate and Accordion ItemDataBound event will be used to bind the products associated with categoryID. Here hiddenField Control is also used in the ContentTemplate to pass the categoryID to the sql query used in the ItemDataBound event of Accordion control to retrieve the corresponding products.

Use DefaultView of DataTable, filled into the in-memory DataSet having data retrieved from the Northwind database, to pass the DataSource for Accordion control.

You can use other properties of Accordion control that we discussed in the previous article of AJAX Toolkit Accordion Control Extender.

CSS code

.acc-header, .acc-selected {
    width: 300px;
    background-color: #c0c0c0;
    margin-bottom: 2px;
    padding: 2px;
    color: #444444;
    font-weight: bold;
    cursor: pointer;
}

.acc-content {
    width: 300px;
    margin-bottom: 2px;
    padding: 2px;
}

.acc-selected, .acc-content {
    border: solid 1px #666666;
}

HTML Code

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

C# Code

string conString = System.Configuration.ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ToString();

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        getCategories();
    }
}

public void getCategories()
{
    SqlConnection sqlConn = new SqlConnection(conString);
    sqlConn.Open();
    SqlCommand sqlSelect = new SqlCommand("SELECT * FROM Categories", sqlConn);
    sqlSelect.CommandType = System.Data.CommandType.Text;
    SqlDataAdapter sqlAdapter = new SqlDataAdapter(sqlSelect);
    DataSet myDataset = new DataSet();
    sqlAdapter.Fill(myDataset);
    sqlConn.Close();

    Accordion1.DataSource = myDataset.Tables[0].DefaultView;
    Accordion1.DataBind();

}

protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
{
    if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
    {
        SqlConnection sqlConn = new SqlConnection(conString);
        sqlConn.Open();
        SqlCommand sqlSelect = new SqlCommand("SELECT productName FROM Products where categoryID = '" + ((HiddenField)e.AccordionItem.FindControl("txt_categoryID")).Value + "'", sqlConn);
        sqlSelect.CommandType = System.Data.CommandType.Text;
        SqlDataAdapter sqlAdapter = new SqlDataAdapter(sqlSelect);
        DataSet myDataset = new DataSet();
        sqlAdapter.Fill(myDataset);
        sqlConn.Close();

        GridView grd = new GridView();

        grd = (GridView)e.AccordionItem.FindControl("GridView1");
        grd.DataSource = myDataset;
        grd.DataBind();
    }
}

Continue to next tutorial: AJAX Always Visible Control Extender to learn how to render the AJAX control that floats over the background content of ASP.Net web page.