CollapsiblePanelExtender: Могу ли я инициировать свертывание / развертывание из клиентского JavaScript? (AJAX Control Toolkit)

Question

CollapsiblePanelExtender, по-видимому, в первую очередь предназначен для свертывания / развертывания объектов в ответ на события пользовательской мыши. Есть также хороший способ заставить расширитель свернуть / развернуть вещи в ответ на JavaScript на стороне клиента?

В моем конкретном случае у меня есть несколько CollapsiblePanelExtenders (и соответствующих им панелей) на странице, и мне интересно, смогу ли я реализовать кнопку "развернуть все панели", выполнив что-то подобное строго на стороне клиента:

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

Вместо этого я могу реализовать эту логику на стороне сервера, если выполнил полный постбэк, но моя страница загружается очень долго, и поэтому не похоже, что это обеспечит очень приятное взаимодействие с пользователем. Таким образом, я заинтересован в том, чтобы развернуть / свернуть клиентскую часть.

Кажется, что это не тот случай использования, который имели в виду люди из AJAX Control Toolkit, но я решил проверить.

Answer 1

У меня есть частично рабочее решение сейчас.

Я последовал предложению Яна и просмотрел источник инструментария. В CollapsiblePanelBehavior.debug.jsможно то expandPanel() очевидно предназначен как часть публичного интерфейса для поведения. Там также есть get_Collapsed(), Ключ к доступу к этому поведению в javascript, кажется, устанавливает BehaviorID недвижимость на вашем CollapsiblePanelExtender теги в ASP.NET.

Я изменил повторитель на своей странице, чтобы BehaviorIDs предсказуемы, по этим направлениям:

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

Это приводит к поведению по имени collapsebehavior1, collapsebehavior2, collapsebehavior3, так далее..

После этого я смог развернуть все складные панели на клиенте следующим образом:

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;
        }
    }
}

Я уверен, что с помощью $find в такой петле действительно неэффективно, но это то, что я до сих пор.

Кроме того, по какой-то причине он не работает в Firefox. (В FF раскрывается только первый элемент, а затем в коде Control Toolkit возникает ошибка Javascript.)

Все это покажется крайне безобразным всем профессионалам JavaScript. Может быть, я исправлю вещи позже, или вы можете мне помочь.

Answer 2

Напишите следующий код в событии OnClick кнопки Image/

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

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

Надеюсь это поможет!

Answer 3

Вы также можете просто переключать панели для переключения между свернутыми / развернутыми состояниями:

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