AJAX Accordion Control Extender DataSource

Updated on 18 Apr 2012,
Published on 04 Jun 2008

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.

AJAX Control Toolkit Examples:

You can see the live samples and examples of AJAX Control Toolkit from the following links:

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();
    }
}

Output:

You can see the output of above discussed code from the following link:

AJAX Accordion Control DataBinding

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.

5 Responses to "AJAX Accordion Control Extender DataSource"
Hello, I'm trying to use a databound Accordion to display my data, but I need the header and the content to be boud to two different datasources, because I need to display a nested List of business objects. Example: MyObject { string propA; List lsNestedObjects; } NestedObjects { string propB; string propC; } I need to display a List and I want the accordion header to display propA, while the accordion content should display the propB and propC of the items in lsNestedObjects. Is there a way to do this with the accordion?
KP
A hundred thanks!!!
Bhavik Dharaiya
Thanks for your demo. actually i can bound the data in Item-Template in Gridview1 but l want to bound the data in header-text also in Gridview1. So please, help me.
S.Ram
hai, i am using the same coding but it's binding first record only constantly...
Here my coding..
<asp:Accordion ID="Accordion1" runat="server" OnItemDataBound="Accordion2_ItemDataBound"
ContentCssClass="acc-content" HeaderCssClass="acc-header" HeaderSelectedCssClass="acc-selected">

<HeaderTemplate>
<%#DataBinder.Eval(Container.DataItem,"code") %>
</HeaderTemplate>
<ContentTemplate>
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"code") %>' />
<asp:GridView ID="GridView1" runat="server" RowStyle-HorizontalAlign="Left" AutoGenerateColumns="false" GridLines="None" CellPadding="2" CellSpacing="2">
<Columns>
<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderText="Locations">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem,"locations") %>
</ItemTemplate>

</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>

in code c#.........
protected void Accordion2_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
{
if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
{
con.Open();
SqlCommand cmd = new SqlCommand("select locations from location where code='" + ((HiddenField)e.AccordionItem.FindControl("HiddenField1")).Value + "'", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
GridView gv = new GridView();
gv = (GridView)e.AccordionItem.FindControl("GridView1");
gv.DataSource = ds;
gv.DataBind();
}
}
output...
KN
Locations
BANGALORE
KANDRIYEAN
NAATRA

TN

TN not showing the locations kindly reply me what i done wrongly....

askar
hi, fantastic.. script thanks..
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email