Tips and tricks with Ajax Collapsible panel
In my preceding article, we saw how to use Ajax collapsible control to hide or unhide portion of your webpage asynchronously. Normally, hiding or unhiding is done based on some user activity or on the completion of some event. So, very often, the plain collapsible panel doesn’t suit your need and you look for some advanced level of functionality with Ajax collapsible panel control. In this article, we will see some of the tips and tricks with collapsible panel control that will help you in fulfilling the need of your client.
1) Expand/Collapse CollapsiblePanel from code behind
Huh, a very simple one. But many of the newbie’s aren’t aware of this one too..This one is for them.
In your code behind, set the Collapsiblepanel collapsed property to true or false to collapse or expand the panel respectively. Alternatively, set the Collapsiblepanel ‘ClientState’ property to true or false to collapse or expand the panel respectively
protected void btn_Collapse(object sender, EventArgs e)
{
// To collapse
this.CollapsiblePanelExtender1.Collapsed = true;
// or
this.CollapsiblePanelExtender1.ClientState = "true";
// To Expand
this.CollapsiblePanelExtender1.Collapsed = false;
// or
this.CollapsiblePanelExtender1.ClientState = "false";
}
2) Expand/Collapse CollapsiblePanel with JavaScript?
Write a javascript function to search your CollapsiblePanel by Id, then use the get_Collapsed() method to get the current state of the control, then use the get_Collapsed() method to expand or collapse the panel accordingly. Call this function on a button click, hover or any other way you wanna call it. Below is the code for button click
<asp:Button ID="btnJS" OnClientClick="ExpandCollapse()" runat="server" Text="JavaScript" />
function ExpandCollapse() {
var collPanel = $find("CollapsiblePanelExtender1");
if (collPanel.get_Collapsed())
collPanel.set_Collapsed(false);
else
collPanel.set_Collapsed(true);
}
3) Toggle state of all CollapsiblePanel control
To achieve this functionality, we first set the behavior property of all our collapsible control in a sequential order. For example, I set the behavior property of my first collapsible panel as Collapsible1, second collapsible panel as Collapsible2 and so on with the rest of the panels.
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" BehaviorID="Collapsible1" runat="server"></ajaxToolkit:CollapsiblePanelExtender>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" BehaviorID="Collapsible2" runat="server"></ajaxToolkit:CollapsiblePanelExtender>
Then, using JavaScript, I loop through all the collapsible panel controls using this behavior id and depending upon the current state of the control, I expand or collapse each of these collapsible panels.
Below is the JavaScript code
function toggleAll() {
var i = 0;
while (true) {
i++;
var name = 'Collapsible' + i;
var theBehavior = $find(name);
if (theBehavior) {
var isCollapsed = theBehavior.get_Collapsed();
if (isCollapsed) {
theBehavior.expandPanel();
}
else
theBehavior.collapsePanel();
}
else {
break;
}
}
}
Alternatively, you can also use the togglePanel function to toggle the current state of the collapsible panel
if (theBehavior) {
var isCollapsed = theBehavior.get_Collapsed();
theBehavior.togglePanel();
}
else {
break;
}
Below is the output of this trick
4) Animate Expanding/Collapsing collapsible panel
Perhaps you may not know this but you can control the speed (fast or slow) of your collapsible panel. Using the fps and duration property, you can set the duration and frame rate at which the panel will expand or collapse.
Below is the JavaScript code for expanding or collapsing first collapsible panel.
function smoothAnimation()
var collPanel = $find("CollapsiblePanelExtender1");
collPanel._animation._fps = 45;
collPanel._animation._duration = 0.90;
5) Prevent flickering of Collapsible Panel first
To avoid flickering of collapsible panel, set AutoCollapse and AutoExpand property to false either in code behind or in aspx page.
this.CollapsiblePanelExtender1.AutoCollapse = false;
this.CollapsiblePanelExtender1.AutoExpand= false;
Alternatively, below is the trick sent to me for my friend. Setting the height of panel to zero and overflow to hidden fix the flickering issue
.cpContent
{
height:0px;
padding: 4px;
overflow: hidden;
}
6) Turn CollapsiblePanel into an accordion
Accordion control is similar to CollapsiblePanel except the fact that only one panel can be expanded at a time whereas in collapsible panel, you can expand multiple panel at a time.
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);
}
}
To turn collapsible control into an accordion, add the following code in you page load event. In this chunk of code, we loop through the entire collapsible panel and assign the delegate coll_ExpandedComplete to each expand event of your collapsible panel. In this example, I have coded for only two collapsible panel named CollapsiblePanelExtender1 and CollapsiblePanelExtender2
function pageLoad(sender, args) {
for (num = 1; num < 3; num++)
$find("CollapsiblePanelExtender" +num).add_expandComplete(coll_ExpandedComplete);
}
Code for coll_ExpandedComplete delegate function is given below. In this piece of code, I collapse all other collapsible control except the one which triggered the event.
function