CollapsiblePanelExtender: Kann ich von clientseitigem JavaScript aus ein-/ausblenden? (AJAX Control Toolkit)

Question

Der CollapsiblePanelExtender scheint in erster Linie dazu gedacht, Dinge als Reaktion auf Benutzermausereignisse zu reduzieren/zu erweitern. Gibt es auch eine gute Möglichkeit, den Extender als Reaktion auf clientseitiges JavaScript zu reduzieren/erweitern?

In meinem speziellen Fall habe ich eine Anzahl von CollapsiblePanelExtenders (und ihre entsprechenden Panels) auf einer Seite, und ich frage mich, ob ich eine "Alle Panels erweitern" -Schaltfläche implementieren könnte, indem Sie so etwas auf dem Client tun Seite:

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

kann ich diese Logik serverseitige stattdessen implementieren, wenn ich eine volle Postbacks tue, aber meine Seite dauert eine lange Zeit, zu laden und diese so nicht scheinen, wie es einen sehr glatten Benutzer bereitstellen würde Erfahrung. Daher bin ich daran interessiert, die Clientseite zu erweitern/zu reduzieren.

Es scheint, als wäre dies kein Anwendungsfall der AJAX Control Toolkit Leute, aber ich dachte, ich würde es überprüfen.

Answer 1

Ich habe jetzt eine teilweise funktionierende Lösung.

Ich folgte Ians Vorschlag und sah mir die Toolkit-Quelle an. In CollapsiblePanelBehavior.debug.js können Sie, dass expandPanel() offenbar als Teil der öffentlichen Schnittstelle für das Verhalten beabsichtigt ist. Es gibt auch eine . Der Schlüssel zum Zugriff auf diese Verhaltensweisen in JavaScript scheint die BehaviorID Eigenschaft auf Ihre CollapsiblePanelExtender Tags in ASP.NET zu setzen.

modifizierte ich den Repeater auf meiner Seite, so dass die BehaviorID s sind vorhersagbar, in dieser Richtung:

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

Das mit Verhalten führt collapsebehavior1 genannt, collapsebehavior2, collapsebehavior3, etc ..

Mit diesem Fertig, ich bin in der Lage, alle zusammenklappbaren Panels auf dem Client wie folgt zu erweitern:

Ich bin sicher, mit $find in einer Schleife wie das ist wirklich ineffizient, aber das ist, was ich bisher habe.

Es funktioniert auch nicht in Firefox aus irgendeinem Grund. (Bei FF wird nur das erste Element erweitert, und dann gibt es einen Javascript-Fehler innerhalb des Control Toolkit-Codes.)

Das wird alles extrem hässlich für alle JavaScript-Profis erscheinen. Vielleicht räum ich später auf, oder du kannst mir helfen.

Answer 2

Sie können auch wechseln nur die Platten zwischen kollabierten/maximierten Status wechseln:

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

Answer 3

Schreiben Sie den folgenden Code in das Ereignis OnClick Bild/Taste

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

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

hoffe, das hilft!