Language

Dynamically Adding An Accordion Pane (VB)

By Christian Wenz|

Download Code or Download PDF

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.

Overview

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.

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)

Author Information

Christian Wenz

Christian Wenz – Christian Wenz is an author, trainer, and consultant. His main focus of working and writing is on web technologies and security. Christian has written or co-written over 100 books for various publishers. He works with both open source and closed source web technologies. This leads to the unusual situation that he has both been awarded a Microsoft MVP for ASP/ASP.NET and is listed in Zend's Who is Who of PHP. He is also listed in Mozilla's credits (about:credits) and is considered an expert in browser-agnostic JavaScript.