Adding Multiple CollapsiblePanelExtender dynamically (in code behind)

Using Multiple CollapsiblePanelExtender’s

My task today was to create something that looked like an Accordion control but you could open multiple accordions (sections) at one time. While many online claim this is doable with the Accordion control, I couldn’t get it to work from the code behind so I decided to go with creating multiple Collapsible Panels.

There’s a great article by Suprotim Agarwal called ASP.NET AJAX CollapsiblePanelExtender – Tips and Tricks, this article get’s us 80% of the way in the section “Tip 5: How to add an ASP.NET AJAX CollapsiblePanelExtender dynamically?”.

Taking his code:


Imports AjaxControlToolkit

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
 ' Create Header Panel
 Dim panelHead As New Panel()
 panelHead.ID = "pH"
 panelHead.CssClass = "cpHeader"
 ' Add Label inside header panel to display text
 Dim lblHead As New Label()
 lblHead.ID = "lblHeader"
 panelHead.Controls.Add(lblHead)

 'Create Body Panel
 Dim panelBody As New Panel()
 panelBody.ID = "pB"
 panelBody.CssClass = "cpBody"
 ' Add Label inside body Panel to display text
 Dim lblB As New Label()
 lblB.ID = "lblBody"
 lblB.Text = "This panel was added dynamically"
 panelBody.Controls.Add(lblB)

 ' Create CollapsiblePanelExtender
 Dim cpe As New CollapsiblePanelExtender()
 cpe.TargetControlID = panelBody.ID
 cpe.ExpandControlID = panelHead.ID
 cpe.CollapseControlID = panelHead.ID
 cpe.ScrollContents = False
 cpe.Collapsed = True
 cpe.ExpandDirection = CollapsiblePanelExpandDirection.Vertical
 cpe.SuppressPostBack = True
 cpe.TextLabelID = lblHead.ID
 cpe.CollapsedText = "Click to Show Content.."
 cpe.ExpandedText = "Click to Hide Content.."

 Me.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelHead)
 Me.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelBody)
 Me.UpdatePanel1.ContentTemplateContainer.Controls.Add(cpe)

 End Sub

To create multiples we need to take the above code and loop through it adding +1 to each ID,  so instead of  panelHead.ID = “pH” we want  panelHead.ID = “pH” & p where at the end of each loop we add +1 to p.  We do this for each ID, so the code would look like this:

 


For num = 0 To header.Count - 1
' Create Header Panel
Dim panelHead As New Panel()
panelHead.ID = "pH" & p
panelHead.CssClass = "accordionHeader"
' Add Label inside header panel to display text
Dim lblHead As New Label()
lblHead.ID = "lblHeader" & p
lblHead.Text = header(num).ToString
panelHead.Controls.Add(lblHead)

'Create Body Panel
Dim panelBody As New Panel()
panelBody.ID = "pB" & p1
panelBody.CssClass = "accordionContent"
' Add Label inside body Panel to display text
Dim lblB As New Label()
lblB.ID = "lblBody" & p1
lblB.Text = body(num).ToString
panelBody.Controls.Add(lblB)

' Create CollapsiblePanelExtender
Dim cpe As New CollapsiblePanelExtender()
cpe.ID = "cpe" & r1
cpe.TargetControlID = panelBody.ID
cpe.ExpandControlID = panelHead.ID
cpe.CollapseControlID = panelHead.ID
cpe.ScrollContents = False
If opennum = 0 Then
cpe.Collapsed = False
Else
cpe.Collapsed = True
End If

cpe.ExpandDirection = CollapsiblePanelExpandDirection.Vertical
cpe.SuppressPostBack = True
cpe.TextLabelID = lblHead.ID
cpe.ExpandedText = header(num).ToString & "<div style='float: right; vertical-align: middle;'><input type='image' name='ImageCollapse" & num & "' id='ImageCol" & num & "' src='../images/collapse.jpg' alt='(Show Details...)' /></div>"
cpe.CollapsedText = header(num).ToString & "<div style='float: right; vertical-align: middle;'><input type='image' name='Imageexp" & num & "' id='ImageExp" & num & "' src='../images/expand_blue.jpg' alt='(Show Details...)' /></div>"

Me.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelHead)
Me.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelBody)
Me.UpdatePanel1.ContentTemplateContainer.Controls.Add(cpe)

p = p + 1
p1 = p1 + 1
r1 = r1 + 1
opennum = opennum + 1
Next

 

Above you’ll notice that we loop as many times as we have headers, for us , this was Category headers from SQL and then each accordion contained subcategories. From SQL we created an array of Category headers and a body array of all subcategories.

Technorati Tags: , , , ,

     

Leave a Reply