Question

The CollapsiblePanelExtender seems primarily designed to collapse/expand things in response to user mouse events. Is there also a good way to get the extender to collapse/expand things in response to client-side javascript?

In my particular case, I have a number of CollapsiblePanelExtenders (and their corresponding Panels) on a page, and I’m wondering if I could implement an “expand all panels” button by doing something like this strictly on the client side:

for each CollapsiblePanelExtender on this page, call somethingOrOther(extender)

I can implement this logic server-side instead if I did a full postback, but my page takes a long time to load, and so this doesn’t seem like it would provide a very slick user experience. Thus I am interested in doing expand/collapse client-side.

It seems like this isn’t a use case the AJAX Control Toolkit people had in mind, but I thought I’d check.

Answer 1

I have a partly working solution now.

I followed Ian’s suggestion and looked through the toolkit source. In CollapsiblePanelBehavior.debug.js, you can that expandPanel() is apparently intended as part of the public interface for the behavior. There’s also a get_Collapsed(). The key to accessing these behaviors in javascript seems to be setting the BehaviorID property on your CollapsiblePanelExtender tags in ASP.NET.

I modified the repeater on my page so that the BehaviorIDs are predictible, along these lines:

<ajaxToolkit:CollapsiblePanelExtender 
    BehaviorID="<%#'collapsebehavior'+DataBinder.Eval(Container.DataItem,'id')%>"
    ID="CollapsiblePanelExtender" runat="server" />

This results with behaviors named collapsebehavior1, collapsebehavior2, collapsebehavior3, etc..

With this done, I’m able to expand all the collapsible panels on the client as follows:

function expandAll() {
    var i = 0;
    while (true) {
        i++;
        var name = 'collapsebehavior' + i;
        var theBehavior = $find(name);
        if (theBehavior) {
            var isCollapsed = theBehavior.get_Collapsed();
            if (isCollapsed) {
                theBehavior.expandPanel();
            }             
        } else {
            // No more more panels to examine
            break;
        }
    }
}

I’m sure using $find in a loop like that is really inefficient, but that’s what I have so far.

Also, it doesn’t work on Firefox for some reason. (On FF only the first element expands, and then there’s a Javascript error inside the Control Toolkit code.)

This will all seem extremely ugly to all you javascript pros. Maybe I’ll clean things up later, or you can help me out.