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: