Accordion AJAX Control Runtime Data display from Database

Accordion AJAX Control Example to Create AccordionPane Runtime with Data from Database.

Accordion Control is one of the best AJAX Control as we can use in many different ways to serve our needs. Please refer to this video if you are new to Accordion AJAX Control.

Many time we generate Menu Runtime for that we make use of Treeview Control, but with this example you will understand how Accordion AJAX Control is better than other solution. In this example I have fetch the Country wise data from Northwind Customer Table and display Customer Information CountryWise.

Example 1: Displaying All the customer group by country, belgium



Example 2: Displaying All the customer group by country, brazil


Note: here the content portion is not showing actual customer Id, but you can display easily using the same way i have used to display countries and attach a querystring to display customer information. This piece of code is reusable.

On .aspx page, declare Accordion control.

<asp:Panel ID="pnlShowCountry" runat="server">
<cc1:Accordion ID="acc" runat="server" SelectedIndex="0" AutoSize="none" FadeTransitions="false" FramesPerSecond="50" TransitionDuration="10" HeaderCssClass="AccordionPaneHeaderCSS" ContentCssClass="AccordionPaneContentCSS">
</cc1:Accordion>      
</asp:Panel>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

On .aspx.cs page (code behind) actual logic to create accordianpane runtime and binding logic.

protected void Page_Load(object sender, EventArgs e)
{
   PopulateCountry();
}

private void PopulateCountry()
{
   DataTable dtCountry = GetCountry();
   DataRow drCountry;
   string CountryName, CountryCount;
  
   for(int i=0;i< dtCountry.Rows.Count;i++)
   {
       drCountry = dtCountry.Rows[i];           
       CountryName = drCountry["CountryName"].ToString();
       CountryCount = drCountry["CountryCount"].ToString();
      
       Label lblHeader = new Label();
       lblHeader.ID = "lblHeader" + i.ToString();
       lblHeader.Text = "<a href='' onclick='return false;' Class='AccordionLink'>" + CountryName + "</a> (" + CountryCount + ")";

       //For Content
       int iCountryCount = Convert.ToInt16(drCountry["CountryCount"]);
       Label lblContent = new Label();
       lblContent.ID = "lblContent" + i.ToString();           
       for (int j = 1; j <= iCountryCount; j++)
       {
           if(j==1)
               lblContent.Text =  "<a href='' onclick='return false;' Class='AccordionLink'>Customer " + j.ToString() + "</a><br>Blah Blah Blah....<br>Blah Blah Blah....Blah Blah Blah....";
           else
               lblContent.Text = lblContent.Text + "<br><a href='' onclick='return false;' Class='AccordionLink'>Customer " + j.ToString() + "</a><br>Blah Blah Blah....<br>Blah Blah Blah....Blah Blah Blah....";
       }

       AccordionPane accp = new AccordionPane();
       accp.ID = "accp" + i.ToString();
       accp.HeaderContainer.Controls.Add(lblHeader);
       accp.ContentContainer.Controls.Add(lblContent);

       acc.Panes.Add(accp);
   }       
   pnlShowCountry.Controls.Add(acc);
}

private DataTable GetCountry()
{
   string strConn = ConfigurationManager.AppSettings["connStr"].ToString();
   SqlConnection conn = new SqlConnection(strConn);
   conn.Open();
   SqlDataAdapter da = new SqlDataAdapter("select Country as 'CountryName',  count(customerId) as 'CountryCount' from customers group by country",conn);
   DataSet ds = new DataSet();       
   da.Fill(ds,"Country");
   DataTable dtCountry = ds.Tables["Country"];       
   return dtCountry;
}