[AJAX Control] Sample Code for Accordion Control DataSource

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

<style type="text/css">

.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;
}

 

</style>

 

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