How to Create Nested Accordions at Runtime in ASP.Net

Introduction

It's an Ajax toolkit control for adding multiple sections with some content separately and expand or collapse each section depending on usability.

I will explain how to bind the Accordion with database values and add it on the page dynamically. To do this you need to create a table in your database and add some data into it for each Parent section header and content and Child section header and content.

To learn more use the following procedure.

Step 1

Create a table named "Students" with 5 fields named "BranchName", "StudentName" ," StudentFName," StudentDOB" and "StudentMobile' respectively.

Where "BranchName" will be the Parent header and its content will contain Student Names as the header in the child Accordion with student details in the child content on the basis of that "BranchName".



Step 2

Insert some data into the table.

1. Student names of "Computer Science" with all details.
   
   
   
   
2. Student names of "Information Technology" with all details.
   
   
   
   
3. Student names of "Electronics" with all details.
   
   
   
   After insertion of data select the table that will look like the following:
   
   

Step 3

Download the AjaxCOntrolToolKit from link to use the Accordion control.

And create a website named "Test_Website".



Right-click on the website and choose "Add Reference" to add the reference of AjaxControlToolkit.



A popup window will open to add the reference and use the following sub steps to add the AjaxControlToolKit.

1. Click on the Browse pan.
2. Click on the Browse button to open another window.
3. Select the path of AjaxControlToolKit from your system.
4. Click on the Add button.
5. Finally click on the OK button.

It will look like the following in the bin folder.



Step 4

1. On the top of the default created page named "Default.aspx", add the Register Tag to add the "AjaxControlToolKit" ScriptManager.
   

   <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
   TagPrefix="asp" %>

2. Add the "AjaxControlToolKit" ScriptManager into the body of the page.
   

   <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
   </asp:ToolkitScriptManager>

3. Add the Panel into the body tag of the page.
   

   <asp:Panel ID="MyContent" runat="server">
   </asp:Panel>

4. Add the style on the page for Accordion Header, Accordion Content and selected Accordion Header.
   

   <style type="text/css">
       .ParentAccordionContent
       {
           border-color: -moz-use-text-color #5078B3;
           border-right: 1px dashed #2F4F4F;
           border-style: none solid solid;
           border-width: medium 1px 1px;
           padding: 10px 5px 5px;
           width: 50%;
           text-align: center;
           background-color: #c1e2f5;
       }
       .ParentAccordionHeader
       {
           cursor: pointer;
           font-family: Arial,Sans-Serif;
           font-weight: bold;
           margin-top: 10px;
           padding: 5px;
           font-size: 14px;
           border: 1px solid #2F4F4F;
           width: 50%;
           background: url(Images/img-collapse.png) no-repeat 750px 7px;
           background-color: #425e89;
           color: white;
           text-align: left;
       }
       .ParentAccordionHeaderSelected
       {
           color: white;
           cursor: pointer;
           font-family: Arial,Sans-Serif;
           font-weight: bold;
           margin-top: 10px;
           padding: 5px;
           font-size: 14px;
           border: 1px solid #2F4F4F;
           width: 50%;
           background: url(Images/img-expand.png) no-repeat 750px 7px;
           background-color: #2fa4e7;
           text-align: center;
       }
       .ChildAccordionContent
       {
           border-color: -moz-use-text-color #72b65a;
           border-right: 1px dashed #2F4F4F;
           border-style: none solid solid;
           border-width: medium 1px 1px;
           padding: 10px 5px 5px;
           width: 98%;
           text-align: left;
           background-color: #cbebbf;
       }
       .ChildAccordionHeader
       {
           cursor: pointer;
           font-family: Arial,Sans-Serif;
           font-weight: bold;
           margin-top: 10px;
           padding: 5px;
           font-size: 14px;
           border: 1px solid #2F4F4F;
           width: 98%;
           background: url(Images/arrow_down.png) no-repeat 720px 7px;
           background-color: #3e6331;
           color: white;
           text-align: left;
       }
       .ChildAccordionHeaderSelected
       {
           color: white;
           cursor: pointer;
           font-family: Arial,Sans-Serif;
           font-weight: bold;
           margin-top: 10px;
           padding: 5px;
           font-size: 14px;
           border: 1px solid #2F4F4F;
           width: 98%;
           background: url(Images/arrown_up.png) no-repeat 720px 7px;
           background-color: #6ca359;
           text-align: center;
       }
   </style>

Note: You need to add the 4 images for the expand and collapse of the Parent and Child that are calling in the stylesheet. All images are in the attached source file.



Step 5

Now here is the procedure for creating the Accordion.

1. Get the data from the database.
2. Create the Accordion.
3. Get the Distinct Branches using LINQ.
4. Create the Parent Pane with Data.
5. Create the Child Accordion.
6. Filter data according current Branch.
7. Create the Child Pane and add it to the Child Accordion.
8. Add the Child Accordion to the Parent Pane and the Parent Pane to the Parent Accordion.
9. Add the Parent Accordion into the panel of the page.

Write the code on the page load event of the page and add the following namespaces on the page.

using System.Data;
using System.Configuration;
using AjaxControlToolkit;
using System.Data.SqlClient;

1. Get the data from the database table named "Students".
   

   DataTable dt = new DataTable();
    try
    {
   
        using (SqlConnection connection = new SqlConnection())
        {
            connection.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ToString();
            connection.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = connection;
            cmd.CommandText = "Select * from Students";
            cmd.CommandType = CommandType.Text;
            SqlDataAdapter da = new SqlDataAdapter(cmd);
   
            da.Fill(dt);
            cmd.Dispose();
            connection.Close();
        }
    }
    catch (Exception ex) { }

   
   
   
2. Create the Parent Accordion dynamically and set the properties of it with some CSS classes.
   

   Accordion ParentAccordion = new Accordion();
   ParentAccordion.ID = "MyParentAccordion";
   ParentAccordion.SelectedIndex = -1;//No default selection
   ParentAccordion.RequireOpenedPane = false;//no open pane
   ParentAccordion.HeaderCssClass = "ParentAccordionHeader";//Header class
   ParentAccordion.HeaderSelectedCssClass = "ParentAccordionHeaderSelected";//Selected herder class
   ParentAccordion.ContentCssClass = "ParentAccordionContent";//Content class

   
   
   
3. Get the Distinct Branches from the data table using a LINQ query.
   

   var res = dt.AsEnumerable()
   .GroupBy(r => r.Field<String>("BranchName")).Select(g => new
   {
   
      BranchName = g.First().Field<String>("BranchName")
   });

   And declare some variables as in the following:
   

   Label lbParentTitle; Label lbParentContent; AccordionPane ParentPane;
   AccordionPane ChildPane; Label lbChildTitle; Label lbChildContent; Accordion ChildAccordion; int i = 0;

   After getting the distinct Branches, use the foreach loop to access the filtered branches.
   

4. Create the Parent Pane and set its title.
   

   ParentPane = new AccordionPane();
   lbParentTitle = new Label();
   lbParentContent = new Label();
   ParentPane.ID = "Pane_" + i.ToString();
   lbParentTitle.Text = r.BranchName;
   ParentPane.HeaderContainer.Controls.Add(lbParentTitle);

   
   
   
5. Create the Child Accordion dynamically and set the properties of it with some CSS classes.
   

   ChildAccordion = new Accordion();
   ChildAccordion.ID = "MyChildtAccordion_" + i.ToString();
   ChildAccordion.SelectedIndex = -1;//No default selection
   ChildAccordion.RequireOpenedPane = false;//no default open pane
   ChildAccordion.HeaderCssClass = "ChildAccordionHeader";//Header class
   ChildAccordion.HeaderSelectedCssClass = "ChildAccordionHeaderSelected";//Selected herder class
   ChildAccordion.ContentCssClass = "ChildAccordionContent";//Content class

   
   
   
6. Get all the students and their information of each branch respectively using a foreach loop.
   

   var result = from g in dt.AsEnumerable()
   where g.Field<string>("BranchName") == r.BranchName
   select new
   {
       StudentName = g.Field<string>("StudentName"),
       StudentFName = g.Field<string>("StudentFName"),
       StudentDOB = g.Field<DateTime>("StudentDOB"),
       StudentMobile = g.Field<string>("StudentMobile")
   };

   
   
   
7. Create the Child pane and add it to the Child Accordion.
   

   foreach (var data in result)
   {
       ChildPane = new AccordionPane();
       lbChildTitle = new Label();
       lbChildContent = new Label();
       ChildPane.ID = "ChildPane_" + data.StudentName + data.StudentDOB;
       lbChildTitle.Text = data.StudentName;
       lbChildContent.Text = "Father's Name :" + data.StudentFName + "<br/>" + "Date Of Birth :"
            + data.StudentDOB.ToString() + "<br/>" + "Mobile No. :" + data.StudentMobile;
       ChildPane.HeaderContainer.Controls.Add(lbChildTitle);
       ChildPane.ContentContainer.Controls.Add(lbChildContent);
       ChildAccordion.Panes.Add(ChildPane);
   }

   
   
   
8. Add the Child Accordion to the Parent Pane and the Parent Pane to the Parent Accordion.
   

   ParentPane.ContentContainer.Controls.Add(ChildAccordion);
   ParentAccordion.Panes.Add(ParentPane);i++;

   
   
   
9. Add the Parent Accordion to the panel of the page outside the loop.
   

   this.MyContent.Controls.Add(ParentAccordion);

Step 6

Now to run the page.



After the "Computer Science" selection.



And after the "Ram" selection.



The same as for "Information Technology" with the first student selection.



Same as "Electronics" with the first student selection.



Conclusion

I hope now you are able to add nested Accordions dynamically to your pages.