Handling CollapsiblePanelExtender events in Javascript

I am currently migrating two ASP.Net projects to VS 2005 AjaxControlToolkit.

Of course I had a glance at the samples, and compared the functionality to its open source counterpart, namely Prototype plus Scriptaculous.

When I built a navigation menu using a couple of CollapsiblePanelExtender controls, I ran across two problems:

1) It seems extremely difficult to store the current state of CollapsiblePanelExtenders to be retrieved in the next GET. The simplest solution would be an asynchronous callback from the extender, but that functionality is not included in the framework.

2) I wanted to collapse the whole navigation menu, which is kept inside an HTML table. To keep the table format static, I used a style=”width: 200px” attribute. However, if the navigation menu is to hide, the width should be set to the size of the expanding icon.

While I am still looking for a solution to 1), the solution for 2) is as follows:

The table cell containing the menu is defined like this:

<td id="tdMenu" style="width: 200px" valign="top">

The table itself is an HTML table, having no runat=”server” attribute.

The CollapsiblePanelExtender has a BehaviorID assigned, “cpbMenu”.

The final step is a bit of Javascript magic:

<script type="text/javascript">
function pageLoad(sender, args)
    $find("cpbMenu").add_expandComplete( expandHandler );
    $find("cpbMenu").add_collapseComplete( collapseHandler );

function expandHandler(sender, args)
    document.getElementById("tdMenu").style.width = "200px";

function collapseHandler(sender, args)
    document.getElementById("tdMenu").style.width = "20px";

That’s it!


4 Responses to Handling CollapsiblePanelExtender events in Javascript

  1. Awesome… It works really well.

  2. Gavin Hewins says:

    Many thanks for this.

    You have helped me solve a problem I was having with resizing the map on my Virtual Horsham website.

  3. Andres says:

    Thanks a lot mate!!

  4. Karu says:


    Thankx for your post! This was really helpfull to fullfill my requirement!

    Thankx again! Really appreciated!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: