CollapsiblePanelExtender：クライアント側のjavascriptから折り畳み/展開を開始できますか？ （AJAX Control Toolkit）

Question

CollapsiblePanelExtenderは、主にユーザーのマウスイベントに応答して物事を折りたたむ/展開するように設計されています。クライアント側のJavaScriptに対応してエクステンダを折りたたんだり展開したりする良い方法はありますか？

特定のケースでは、ページにCollapsiblePanelExtenders（および対応するパネル）がいくつかあります。このようなことをクライアントで厳密に行うことで、「すべてのパネルを展開」ボタンを実装できるかどうか疑問ですサイド：

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

私はフルポストバックをやった場合、私は代わりに、このロジックをサーバ側に実装することができますが、私のページをロードするのに長い時間を要し、それは非常に滑らかなユーザーを提供することになるようなので、これはいないようです経験。したがって、クライアントサイドの展開/折りたたみを行うことに興味があります。

これはAJAX Control Toolkitの人々が念頭に置いていたユースケースではないようですが、確認したいと思っていました。

Answer 1

私は今や部分的に有効な解決策を持っています。

私はIanの提案に従い、ツールキットのソースを調べました。 CollapsiblePanelBehavior.debug.jsでは、その動作のパブリックインターフェイスの一部として、expandPanel()が明らかに意図されています。 get_Collapsed()もあります。 javascriptでこれらの動作にアクセスするための鍵は、ASP.NETのCollapsiblePanelExtenderタグのBehaviorIDプロパティを設定しているようです。

BehaviorID sがこれらの線に沿って、predictibleになるように、私は自分のページ上のリピーターを変更：

<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

また、単に崩壊/拡張状態の間で切り替えるように、パネルを切り替えることができます。

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

Answer 3

画像/ボタンのOnClickイベントに次のコードを書く

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

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

・ホープ、このことができます！