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

问题

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.

回答1:

Write the following code in the OnClick event of Image/button

<asp:Image ID="img1" runat="server" OnClick="ExpandCollapse()"/>  

function ExpandCollapse() {
    $find("collapsibleBehavior1").set_Collapsed(true);
    $find("collapsibleBehavior2").set_Collapsed(true);
}

Hope this helps!

回答2:

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.

回答3:

You can also just toggle the panels to switch between collapsed/expanded states:

    function toggle() {
        var MenuCollapser = $find("name");
        MenuCollapser.togglePanel();
    }

来源：https://stackoverflow.com/questions/1065730/collapsiblepanelextender-can-i-initiate-collapse-expand-from-client-side-javasc

标签

ajaxcontroltoolkit

collapsiblepanelextender