Dynamically Adding An Accordion Pane

This is the Visual Basic tutorial (Switch to the Visual C# tutorial)

The Accordion control in the AJAX Control Toolkit provides multiple panes and allows the user to display one of them at a time. Panels are usually declared within the page itself, but server-side code can be used to achieve the same result.

Download the code for this tutorial | Download the tutorial in PDF format | View a demo

« Previous Tutorial | Next Tutorial »

Dynamically Adding An Accordion Pane

Christian Wenz

Overview

Steps

The Accordion control exposes all important properties to server-side code. Among other things, the Panes property grants access to the collection of panes that make up the Accordion. Every pane there is of type AccordionPane. It is therefore trivial to create such a pane:


Dim ap1 As New AccordionPane()

The HeaderContainer property of AccordionPane provides access to the ASP.NET controls within the header section of the pane; the ContentContainer property of AccordionPane does the same for the content section of the pane. This allows ASP.NET code to add content to the panes:


ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is really flexible."))

Finally, the pane(s) must be added to the Panes collection of the Accordion:


acc1.Panes.Add(ap1)

Here is a complete server-side code that adds two panes to an Accordion control:


<script runat="server">
Sub Page_Load()
     If Not Page.IsPostBack Then
          Dim ap1 As New AccordionPane()
          ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Markup"))
          ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using markup is really simple."))
          Dim ap2 As New AccordionPane()
          ap2.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
          ap2.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is really flexible."))
          acc1.Panes.Add(ap1)
          acc1.Panes.Add(ap2)
     End If
End Sub
</script>

The only missing element is the Accordion itself, which depends on the presence of the ASP.NET ScriptManager control:


<form id="form1" runat="server">
     <asp:ScriptManager ID="asm" runat="server" />
     <div>
          <ajaxToolkit:Accordion ID="acc1" runat="server" 
               HeaderCssClass="header" ContentCssClass="content" Width="300px" FadeTransitions="true">
          </ajaxToolkit:Accordion>
     </div>
</form>

To finish the example, the two CSS classes referenced in the Accordion control provide style information for the browser:


<style type="text/css">
     .header {background-color: blue;}
     .content {border: solid;}
</style>

The data in the accordion was dynamically added by server-side code (Click to view full-size image)

Next Tutorial

Visual Basic Tutorials

(Switch to Visual C# tutorials)

AJAX Control Toolkit Tutorials Start Page

AJAX Control Toolkit Tutorials

Advertise on ASP.NET

About this Site