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";
}
</script>

That’s it!