ASP.NET AJAX CollapsiblePanelExtender - Tips and Tricks
As given in the ASP.NET AJAX toolkit documentation, the “CollapsiblePanel is a very flexible extender that allows you to easily add collapsible sections to your web page. This extender targets any ASP.NET Panel control” Here are some tips that will help you out in your projects while dealing with CollapsiblePanel Control.
I assume you have some basic experience developing ASP.NET AJAX applications and have installed the ASP.NET AJAX Library and ASP.NET Control Toolkit. As of this writing, the toolkit version is Version 1.0.20229 (if you are targeting Framework 2.0, ASP.NET AJAX 1.0 and Visual Studio 2005) and Version 3.5.20229 (if targeting .NET Framework 3.5 and Visual Studio 2008). Read more about it over here
To apply these tips, I have created a sample with the CollapsiblePanel control. Assuming you have AJAX Control Toolkit for 3.5 installed, Open Visual Studio 2008 > File > New Website > ‘ASP.NET WebSite’ > Enter a name and location for the project > Click Ok.
Drag and drop a <ScriptManager> from the Toolbox to the page. Now add an UpdatePanel to the page. Inside the <ContentTemplate> drag and drop a CollapsiblePanel from the AJAX toolkit. After applying some Css and add properties of the CollapsiblePanel, the mark up will look similar to the following:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CollapsiblePanelExtender Tips </title>
<style type="text/css">
.cpHeader
{
color: white;
background-color: #719DDB;
font: bold 11px auto "Trebuchet MS", Verdana;
font-size: 12px;
cursor: pointer;
width:450px;
height:18px;
padding: 4px;
}
.cpBody
{
background-color: #DCE4F9;
font: normal 11px auto Verdana, Arial;
border: 1px gray;
width:450px;
padding: 4px;
padding-top: 7px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
<asp:Label ID="lblText" runat="server" />
</asp:Panel>
<asp:Panel ID="pBody" runat="server" CssClass="cpBody">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pBody" CollapseControlID="pHeader" ExpandControlID="pHeader"
Collapsed="true" TextLabelID="lblText" CollapsedText="Click to Show Content.." ExpandedText="Click to Hide Content.."
CollapsedSize="0">
</cc1:CollapsiblePanelExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Tip 1: How to Expand/Collapse the ASP.NET AJAX CollapsiblePanel programmatically using JavaScript?
In order to expand/collapse the CollapsiblePanel programmatically, use the following code. In this sample, we will be expanding/collapsing the CollapsiblePanel on a button click. The button is kept outside the CollapsiblePanel but inside the UpdatePanel.
...
<asp:Button ID="btnClick" OnClientClick="ExpandCollapse()"
runat="server" Text="Expand/Collapse" />
</ContentTemplate>
</asp:UpdatePanel>
Add JavaScript in the <head> tag as shown below:
<script type="text/javascript">
function ExpandCollapse() {
var collPanel = $find("CollapsiblePanelExtender1");
if (collPanel.get_Collapsed())
collPanel.set_Collapsed(false);
else
collPanel.set_Collapsed(true);
}
</script>
Tip 2: How to Expand/Collapse the ASP.NET AJAX CollapsiblePanel programmatically using C# or VB.NET?
Set the ‘Collapsed’ property to true (collapses panel) or false (expands panel). Alternatively, setting the ‘ClientState’ to true (collapses panel) or false (expands panel) does the trick.
C#
protected void btn_Collapse(object sender, EventArgs e)
{
// Expand
this.CollapsiblePanelExtender1.Collapsed = false;
this.CollapsiblePanelExtender1.ClientState = "false";
// Collapse
// Expand
this.CollapsiblePanelExtender1.Collapsed = true;
this.CollapsiblePanelExtender1.ClientState = "true";
}
VB.NET
Protected Sub btn_Collapse(ByVal sender As Object, ByVal e As EventArgs)
' Expand
Me.CollapsiblePanelExtender1.Collapsed = False
Me.CollapsiblePanelExtender1.ClientState = "false"
' Collapse
' Expand
Me.CollapsiblePanelExtender1.Collapsed = True
Me.CollapsiblePanelExtender1.ClientState = "true"
End Sub
Tip 3: How to prevent flickering to occur when the ASP.NET AJAX Collapsible Panel first loads?
At Page Load, if the CollapsiblePanel expands and then collapses again causing a flashing to occur, you can solve it by setting the height of the Panel body to 0 and setting the overflow to hidden
.cpBody
{
background-color: #DCE4F9;
font: normal 11px auto Verdana, Arial;
border: 1px gray;
width:450px;
padding: 4px;
padding-top: 2px;
height:0px;
overflow: hidden;
}
Tip 4: How to make an ASP.NET AJAX CollapsiblePanelExtender behave like an Accordion control?
Accordion allows you to have multiple panes where only one can be expanded at a time. When one of the panels is expanded by the user, the other collapses. Let us see how to achieve this functionality in the CollapsiblePanelExtender. I got this tip from Vince Xu - MSFT.
Add two Panels and corresponding CollapsiblePanelExtenders for the two Panels as shown below:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
<asp:Label ID="lblText" runat="server" />
</asp:Panel>
<asp:Panel ID="pBody" runat="server" CssClass="cpBody" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pBody" CollapseControlID="pHeader" ExpandControlID="pHeader"
Collapsed="false" TextLabelID="lblText" CollapsedText="Click to Show Content.." ExpandedText="Click to Hide Content.." CollapsedSize="0">
</cc1:CollapsiblePanelExtender>
<asp:Panel ID="pHeaderTwo" runat="server" CssClass="cpHeader">
<asp:Label ID="lblTextTwo" runat="server" />
</asp:Panel>
<asp:Panel ID="pBodyTwo" runat="server" CssClass="cpBody" >
This is my second panel
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" TargetControlID="pBodyTwo" CollapseControlID="pHeaderTwo" ExpandControlID="pHeaderTwo"
Collapsed="true" TextLabelID="lblTextTwo" CollapsedText="Click to Show Content.." ExpandedText="Click to Hide Content.." CollapsedSize="0">
</cc1:CollapsiblePanelExtender>
</ContentTemplate>
</asp:UpdatePanel>
Now add some JavaScript in the <head> as shown below:
<script type="text/javascript">
function pageLoad(sender, args) {
for (num = 1; num < 3; num++) {
$find("CollapsiblePanelExtender" + num).add_expandComplete(coll_ExpandedComplete);
}
}
function coll_ExpandedComplete(sender, arg) {
for (num = 1; num < 3; num++) {
var CollapsiblePanel = $find("CollapsiblePanelExtender" + num);
if (sender._expandControlID != CollapsiblePanel._expandControlID)
CollapsiblePanel.collapsePanel(CollapsiblePanel._expandControlID);
}
}
</script>
Note: Observe that the first Panel is expanded on load.
Tip 5: How to add an ASP.NET AJAX CollapsiblePanelExtender dynamically?
Use the following code to create and add a CollapsiblePanelExtender dynamically
C#
using AjaxControlToolkit;
protected void Page_Load(object sender, EventArgs e)
{
// Create Header Panel
Panel panelHead = new Panel();
panelHead.ID = "pH";
panelHead.CssClass = "cpHeader";
// Add Label inside header panel to display text
Label lblHead = new Label();
lblHead.ID = "lblHeader";
panelHead.Controls.Add(lblHead);
//Create Body Panel
Panel panelBody = new Panel();
panelBody.ID = "pB";
panelBody.CssClass = "cpBody";
// Add Label inside body Panel to display text
Label lblB = new Label();
lblB.ID = "lblBody";
lblB.Text = "This panel was added dynamically";
panelBody.Controls.Add(lblB);
// Create CollapsiblePanelExtender
CollapsiblePanelExtender cpe =
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..";
this.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelHead);
this.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelBody);
this.UpdatePanel1.ContentTemplateContainer.Controls.Add(cpe);
}
VB.NET
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
Tip 6: How to create a Smooth Animation while Expanding/Collapsing the ASP.NET AJAX CollapsiblePanelExtender?
To create a smooth animation while expanding/collapsing panels, change the fps and duration property using client script as shown below:
<script type="text/javascript">
function pageLoad(sender, args) {
smoothAnimation();
}
function smoothAnimation()
{
var collPanel = $find("CollapsiblePanelExtender1");
collPanel._animation._fps = 45;
collPanel._animation._duration = 0.90;
}
</script>
Well those were some tips associated with the AJAX CollapsiblePanelExtender. If you have a tip about this control not covered in this article, share the via the comments section. I hope this article was useful and I thank you for viewing it.