ACT: CollapsiblePanelExtender - How to Collapse / Expand Programmatically

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 = true; cpe1.ClientState = "true";
To close: cpe1.Collapsed = false; cpe1.ClientState = "false";

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.

8 Comments

  • Thanks buddy, it helped me..:)

  • 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('');
    }

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

  • 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";

  • Thanks a million :)

  • Dont work. I try and Try but dont work. :( help me.

    my code in VB.net(VS 2005) is:

    CollapsiblePanelExtender1.Collapsed = True
    CollapsiblePanelExtender1.ClientState = "true"

    CollapsiblePanelExtender2.Collapsed = False
    CollapsiblePanelExtender2.ClientState = "false"

  • But how to collapse or expand multiple items ?

  • Thanks! Saved me a bunch of hassle figuring this out on my own.

  • its not working..

Comments have been disabled for this content.