CollapsiblePanelExtender: Can I initiate collapse/expand from client-side javascript? (AJAX Control Toolkit)

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.