ACT: CollapsiblePanelExtender - How to Collapse / Expand Programmatically

1148 views

The CollapsiblePanelExtender is a cool way to convert simple panels to collapsible ones. It usually has a target panel, a control which can make it collapse, another (or the same) control to make it expand etc. Clicking the said controls will trigger the collapse/open behaviour.

We may need to sometimes control this behaviour from code - both client side javascript and server side code behind. Suppose we have a CollapsiblePanelExtender with the Id 'cpe1'. We wish to manipulate the state via code.

Client Side

Client side manipulation is pretty simple and can be found in the tutorials section in www.asp.net/learn - we just need to call these methods:

To open: $find('cpe1')._doOpen();
To close: $find('cpe1')._doClose();

The $find tracks down the behaviour object and calls the _doOpen or _doClose methods.

Server Side

This is surprisingly slightly trickier. You'd think that just calling

ScriptManager.RegisterClientScriptBlock(this, typeof(Page), DateTime.Now.ToString(), "$find('cpe1')._doOpen();", true);

would work. It doesn't. Any attempt to call $find('cpe1') results in a null. This is likely because of the fact that behaviours are added at the end and our script gets registered before the behaviour is available. The actual way to do it is actually quite simple (once you know how):

To open: cpe1.Collapsed = false; cpe1.ClientState = "false";
To close: cpe1.Collapsed = true; cpe1.ClientState = "true";

Setting just the Collapsed property is not enough, you need to set both. It's actually a lot less messy than registering javascript, but it is very annoying until you know it.

Hope that helps.

Tags: AJAX, AJAX Control Toolkit, ASP.NET

Nov 20 2008 4:00 PM

5 Comments

  • http:// said

    I cannot get this to work on either the client side or the server side. I am attempting to close the panel after an asynchronous server-side event. I've tried the server-side method you listed and it didn't affect the page at all, so I wrote a js function and am calling that function from ScriptManager (the function is firing), but that's not working either.

    function HidePanel() {
    var cpe = $find('cpeSummaryView');
    if(!cpe)
    {
    cpe = $get('<%= cpeSummaryView.ClientID %>');
    }

    if (!cpe) {
    alert('Cannot locate the control panel extender.');
    }
    else {
    cpe._doClose();
    }
    }

  • http:// said

    Excellent info!! Your open and close directions are reversed, should be:

    To open: cpe1.Collapsed = false; cpe1.ClientState = "false";
    To close: cpe1.Collapsed = true; cpe1.ClientState = "true";

Add a Comment