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

BranchName

Step 2

Insert some data into the table.

  1. Student names of "Computer Science" with all details.

    Student names of Computer Science

  2. Student names of "Information Technology" with all details.

    Student names of Information Technology

  3. Student names of "Electronics" with all details.

    Student names of Electronics

    After insertion of data select the table that will look like the following:

    select the table

Step 3

Download the AjaxCOntrolToolKit from link to use the Accordion control.

And create a website named "Test_Website".

create a website

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

Addreference

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.

AjaxControlToolKit

It will look like the following in the bin folder.

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.
    1. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"   
    2. TagPrefix="asp" %>  
  2. Add the "AjaxControlToolKit" ScriptManager into the body of the page.
    1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
    2. </asp:ToolkitScriptManager>  
  3. Add the Panel into the body tag of the page.
    1. <asp:Panel ID="MyContent" runat="server">  
    2. </asp:Panel>  
  4. Add the style on the page for Accordion Header, Accordion Content and selected Accordion Header.
    1. <style type="text/css">  
    2.     .ParentAccordionContent  
    3.     {  
    4.         border-color: -moz-use-text-color #5078B3;  
    5.         border-right1px dashed #2F4F4F;  
    6.         border-stylenone solid solid;  
    7.         border-widthmedium 1px 1px;  
    8.         padding10px 5px 5px;  
    9.         width50%;  
    10.         text-aligncenter;  
    11.         background-color#c1e2f5;  
    12.     }  
    13.     .ParentAccordionHeader  
    14.     {  
    15.         cursorpointer;  
    16.         font-familyArial,Sans-Serif;  
    17.         font-weightbold;  
    18.         margin-top10px;  
    19.         padding5px;  
    20.         font-size14px;  
    21.         border1px solid #2F4F4F;  
    22.         width50%;  
    23.         backgroundurl(Images/img-collapse.png) no-repeat 750px 7px;  
    24.         background-color#425e89;  
    25.         colorwhite;  
    26.         text-alignleft;  
    27.     }  
    28.     .ParentAccordionHeaderSelected  
    29.     {  
    30.         colorwhite;  
    31.         cursorpointer;  
    32.         font-familyArial,Sans-Serif;  
    33.         font-weightbold;  
    34.         margin-top10px;  
    35.         padding5px;  
    36.         font-size14px;  
    37.         border1px solid #2F4F4F;  
    38.         width50%;  
    39.         backgroundurl(Images/img-expand.png) no-repeat 750px 7px;  
    40.         background-color#2fa4e7;  
    41.         text-aligncenter;  
    42.     }  
    43.     .ChildAccordionContent  
    44.     {  
    45.         border-color: -moz-use-text-color #72b65a;  
    46.         border-right1px dashed #2F4F4F;  
    47.         border-stylenone solid solid;  
    48.         border-widthmedium 1px 1px;  
    49.         padding10px 5px 5px;  
    50.         width98%;  
    51.         text-alignleft;  
    52.         background-color#cbebbf;  
    53.     }  
    54.     .ChildAccordionHeader  
    55.     {  
    56.         cursorpointer;  
    57.         font-familyArial,Sans-Serif;  
    58.         font-weightbold;  
    59.         margin-top10px;  
    60.         padding5px;  
    61.         font-size14px;  
    62.         border1px solid #2F4F4F;  
    63.         width98%;  
    64.         backgroundurl(Images/arrow_down.png) no-repeat 720px 7px;  
    65.         background-color#3e6331;  
    66.         colorwhite;  
    67.         text-alignleft;  
    68.     }  
    69.     .ChildAccordionHeaderSelected  
    70.     {  
    71.         colorwhite;  
    72.         cursorpointer;  
    73.         font-familyArial,Sans-Serif;  
    74.         font-weightbold;  
    75.         margin-top10px;  
    76.         padding5px;  
    77.         font-size14px;  
    78.         border1px solid #2F4F4F;  
    79.         width98%;  
    80.         backgroundurl(Images/arrown_up.png) no-repeat 720px 7px;  
    81.         background-color#6ca359;  
    82.         text-aligncenter;  
    83.     }  
    84. </style>  

Add the style on the page for Accordion Header

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.

images

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.

  1. using System.Data;  
  2. using System.Configuration;  
  3. using AjaxControlToolkit;  
  4. using System.Data.SqlClient;  
  1. Get the data from the database table named "Students".
    1. DataTable dt = new DataTable();  
    2.  try  
    3.  {  
    4.   
    5.      using (SqlConnection connection = new SqlConnection())  
    6.      {  
    7.          connection.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ToString();  
    8.          connection.Open();  
    9.          SqlCommand cmd = new SqlCommand();  
    10.          cmd.Connection = connection;  
    11.          cmd.CommandText = "Select * from Students";  
    12.          cmd.CommandType = CommandType.Text;  
    13.          SqlDataAdapter da = new SqlDataAdapter(cmd);  
    14.   
    15.          da.Fill(dt);  
    16.          cmd.Dispose();  
    17.          connection.Close();  
    18.      }  
    19.  }  
    20.  catch (Exception ex) { }  
    Get the data from the database

  2. Create the Parent Accordion dynamically and set the properties of it with some CSS classes.
    1. Accordion ParentAccordion = new Accordion();  
    2. ParentAccordion.ID = "MyParentAccordion";  
    3. ParentAccordion.SelectedIndex = -1;//No default selection  
    4. ParentAccordion.RequireOpenedPane = false;//no open pane  
    5. ParentAccordion.HeaderCssClass = "ParentAccordionHeader";//Header class  
    6. ParentAccordion.HeaderSelectedCssClass = "ParentAccordionHeaderSelected";//Selected herder class  
    7. ParentAccordion.ContentCssClass = "ParentAccordionContent";//Content class  
    Create the Parent Accordion dynamically

  3. Get the Distinct Branches from the data table using a LINQ query.
    1. var res = dt.AsEnumerable()  
    2. .GroupBy(r => r.Field<String>("BranchName")).Select(g => new  
    3. {  
    4.   
    5.    BranchName = g.First().Field<String>("BranchName")  
    6. });  
    And declare some variables as in the following:
    1. Label lbParentTitle; Label lbParentContent; AccordionPane ParentPane;  
    2. AccordionPane ChildPane; Label lbChildTitle; Label lbChildContent; Accordion ChildAccordion; int i = 0;  
    Get the Distinct Branches

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

  4. Create the Parent Pane and set its title.
    1. ParentPane = new AccordionPane();  
    2. lbParentTitle = new Label();  
    3. lbParentContent = new Label();  
    4. ParentPane.ID = "Pane_" + i.ToString();  
    5. lbParentTitle.Text = r.BranchName;  
    6. ParentPane.HeaderContainer.Controls.Add(lbParentTitle);  
    Create the Parent Pane

  5. Create the Child Accordion dynamically and set the properties of it with some CSS classes.
    1. ChildAccordion = new Accordion();  
    2. ChildAccordion.ID = "MyChildtAccordion_" + i.ToString();  
    3. ChildAccordion.SelectedIndex = -1;//No default selection  
    4. ChildAccordion.RequireOpenedPane = false;//no default open pane  
    5. ChildAccordion.HeaderCssClass = "ChildAccordionHeader";//Header class  
    6. ChildAccordion.HeaderSelectedCssClass = "ChildAccordionHeaderSelected";//Selected herder class  
    7. ChildAccordion.ContentCssClass = "ChildAccordionContent";//Content class  
    Create the Child Accordion dynamically

  6. Get all the students and their information of each branch respectively using a foreach loop.
    1. var result = from g in dt.AsEnumerable()  
    2. where g.Field<string>("BranchName") == r.BranchName  
    3. select new  
    4. {  
    5.     StudentName = g.Field<string>("StudentName"),  
    6.     StudentFName = g.Field<string>("StudentFName"),  
    7.     StudentDOB = g.Field<DateTime>("StudentDOB"),  
    8.     StudentMobile = g.Field<string>("StudentMobile")  
    9. };  
    Get the all students

  7. Create the Child pane and add it to the Child Accordion.
    1. foreach (var data in result)  
    2. {  
    3.     ChildPane = new AccordionPane();  
    4.     lbChildTitle = new Label();  
    5.     lbChildContent = new Label();  
    6.     ChildPane.ID = "ChildPane_" + data.StudentName + data.StudentDOB;  
    7.     lbChildTitle.Text = data.StudentName;  
    8.     lbChildContent.Text = "Father's Name :" + data.StudentFName + "<br/>" + "Date Of Birth :"  
    9.          + data.StudentDOB.ToString() + "<br/>" + "Mobile No. :" + data.StudentMobile;  
    10.     ChildPane.HeaderContainer.Controls.Add(lbChildTitle);  
    11.     ChildPane.ContentContainer.Controls.Add(lbChildContent);  
    12.     ChildAccordion.Panes.Add(ChildPane);  
    13. }  
    Create the Child pane

  8. Add the Child Accordion to the Parent Pane and the Parent Pane to the Parent Accordion.
    1. ParentPane.ContentContainer.Controls.Add(ChildAccordion);  
    2. ParentAccordion.Panes.Add(ParentPane);i++;  
    Add Child Accordion

  9. Add the Parent Accordion to the panel of the page outside the loop.
    1. this.MyContent.Controls.Add(ParentAccordion);  
    Add the Parent Accordion

Step 6

Now to run the page.

run the page

After the "Computer Science" selection.

Computer Science

And after the "Ram" selection.

Ram

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

Information Technology

Same as "Electronics" with the first student selection.

Electronics

Conclusion

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

Up Next
    Ebook Download
    View all
    Learn
    View all