Adding Content to Accordion Pane in Code Behind

Adding Content to Accordion Pane in code behind and Creating an Accordion Control in Code Behind

Today I had to create an app the had a menu of countries and states but I only wanted countries or states that our company had businesses in. I’d pull them from the SQL server and have an accordion panel as the menu, one menu item States and when you clicked on it all the states would list below it as LinkButtons, The same setup was created for the Countries also. Using LinkButtons I would then open panels to the right depending on their menu choice.

There are 2 options for creating the Accordion and it’s Panels. You can either create them in the aspx page by dragging them onto the page and then add data to them from the code behind page like this:

Adding to an already created Accordion from Code Behind

<br>  'used to center code on blog

   Dim stateslink As New LinkButton
   stateslink.ID = "States" & dr("Country") 'set Linkbutton ID
   stateslink.Text = dr("Country") 'set Linkbutton text
   stateslink.CssClass = "LinkButtonSideindent" 'set Linkbutton CSS
   AddHandler stateslink.Click, AddressOf lnk_Click 'once clicked do what?
   AccordionPane0.ContentContainer.Controls.Add(stateslink) 'add to AccordionPane0

<br>

In the above code, AccordionPane0 was in the accordion we created by dragging and dropping.
But what if you wanted to create the entire accordion in the code behind?

Creating an Accordion in Code Behind

First on your aspx page you need to tell the code behind where this accordion is going to go. Add this to your aspx page:

<br/>

<asp:Panel ID="AccordionPanel" runat="server">

</asp:Panel>

<br/>

Then create the accordion in code behind

<br> 'to center on blog

Dim Accordion2 As Accordion = New Accordion
        Accordion2.ID = "States"
        'Accordion2.AutoSize = none
        Accordion2.ContentCssClass = "LinkButtonSideindent2"

        Accordion2.HeaderCssClass = "LinkButtonSide"
        Accordion2.HeaderSelectedCssClass = "LinkButtonSideactive"
        Accordion2.FadeTransitions = "True"
        Accordion2.SelectedIndex = "-1"
        Accordion2.RequireOpenedPane = "false"
        Accordion2.FramesPerSecond = 40
        Accordion2.TransitionDuration = 250
        Accordion2.RequireOpenedPane = False
        Accordion2.Panes.Add(newPaneStates("State / Province"))

        AccordionPanel.Controls.Add(Accordion2)

<br>

The above code creates an accordion named Accordion2 with an ID of States and a pane called State / Province. After creating the accordion we need to add content to it, just like above except this time we’ll create the pane and point the data to our new accordion

<br/> ' centering code for blog

Dim aPane As AccordionPane = New AccordionPane ' creates new pane
aPane.HeaderContainer.Controls.Add(New LiteralControl(header)) 'creates header, set from above code State/provinces

...Get data from sql...
...Push data into the accordion pane..

    Dim stateslink As New LinkButton
    stateslink.ID = "States" & dr("Country")
    stateslink.Text = dr("Country")
    stateslink.CssClass = "LinkButtonSideindent"
    AddHandler stateslink.Click, AddressOf lnk_Click
    AccordionPane0.ContentContainer.Controls.Add(stateslink)

<br/>

Last, if one of the linkButtons is clicked we need to create a function that will tell the page what to do:

<br/>

Protected Sub lnk_Click(ByVal sender As Object, ByVal e As EventArgs)
        ClientScript.RegisterClientScriptBlock(Me.[GetType](), "lnk", _
        "<script type = 'text/javascript'>alert('LinkButton Clicked');</script>")
    End Sub

<br/>

Technorati Tags: Accordion Control, code behind, LinkButton, VB.NET