How to track Collapse/ Expand event of AJAX Collapsible Panel Extender to call javascript ? RSS

• • Reply
  

  sarang_for_f...

  Member

  3 Points

  37 Posts

  How to track Collapse/ Expand event of AJAX Collapsible Panel Extender to call javascript ?

  May 21, 2007 10:25 AM|LINK

  Hi

  I am working with AJAX Panel Collapsable panel extender.

  The Panel which is to be collapsed/Expanded using AJAX panel Extender contains one custom control, containing 3 Radio buttons one of them is set checked through a javascript function when page loads. I have kept the default property of AJAX collapsable panel as Collapsable.

  Script for AJAX Collapsible Panel Extender is as follow. 

   <ajax:CollapsiblePanelExtender ID="cpeSOP" runat="Server" CollapseControlID="pnlCollapsable"
     CollapsedSize="0" Collapsed="True" CollapsedImage="~/public/img/arrowRightWhite.gif"
     ExpandControlID="pnlCollapsable" ExpandDirection="Vertical" ExpandedImage="~/public/img/arrowDownWhite.gif"
     ImageControlID="Image1" SuppressPostBack="true" TargetControlID="pnlSearchCriteria">
    </ajax:CollapsiblePanelExtender>

  But problem is that when page loads, collapsible panel gets collapsed but it resets the radio buttons in custom control. i.e. First radio button does not get checked. Script for Collpsable panel is as follow. I want to call some javascript code when the panel is Collapsed or Expanded. Is there any way to track Collapse / Expand event (client side / server side) of AJAX Collapsable Panel Extender ?

   If so it will be my pleaseure to know this as early as possible, as i am fighting on this problem since long time. I searched for this, but found nothing for events.

  Thank you.

  Sarang Deshpande

  AJAX Collapsible Panel Extender

  Sarang.Deshpande
• • Reply
  

  Phanatic

  Contributor

  2150 Points

  397 Posts

  Re: How to track Collapse/ Expand event of AJAX Collapsible Panel Extender to call javascript ?

  May 21, 2007 12:56 PM|LINK

  Hi,

   Add a BehaviorID to the CollapsiblePanelExtender .

   BehaviorId="collapsibleBehavior"

  Use JS Functions to hook onto the Expand and collapse events.

  EX:

  function pageLoad(sender,args){

  $find("collapsibleBehavior").add_expandComplete( expandHandler );

  $find("collapsibleBehavior").add_add_collapseComplete( collapseHandler );

  }

  function expandHandler( sender  , args ){

  alert('I have expanded');

  }

  function collapseHandler( sender  , args ){

  alert('I have collapsed');

  }

   

  Hope this  helps.

  If the reply helps you resolve the issue , please mark it as the answer

  Phani Raj
  http://blogs.msdn.com/PhaniRaj
  • Marked as answer by sarang_for_forum on May 23, 2007 10:14 AM
• • Reply
  

  sarang_for_f...

  Member

  3 Points

  37 Posts

  Re: How to track Collapse/ Expand event of AJAX Collapsible Panel Extender to call javascript ?

  May 23, 2007 10:11 AM|LINK

  It worked !!!!!!!

   Thank you very very much. I was searching for this solution since long time. The code given by you is working correctly.

  Now i am trying to put this code into serverside using Page.RegisterClientScriptblock()

   

  Thanks for the help again.

   

   

  Collapsable Panel Extender

  Sarang.Deshpande
  • Edited by sarang_for_forum on May 23, 2007 10:13 AM
  • Edited by sarang_for_forum on May 23, 2007 10:13 AM
• • Reply
  

  Makubex

  Member

  4 Points

  4 Posts

  Re: How to track Collapse/ Expand event of AJAX Collapsible Panel Extender to call javascript ?

  Aug 24, 2007 06:55 PM|LINK

  I have created one Collapsible panel and this works fine.

  Now my problem is that i have 3 of these, and I want all of them to point to expandHandler and collapseHandler, both of my expandHandler and collapseHandler calls a server method through webservice.

   
  Since my webservice needs to know which panel is being expanded, i need to pass a reference of the panels (an id, or the control object whatever, i need to identify them). So i attempted passing the sender argument to the server side code, and when i run it, somehow the javascript gets caught in an infinite stack.

   
  Can you help? Thx
   

   
   

• • Reply
  

  pruthvishtha...

  Member

  2 Points

  2 Posts

  Re: How to track Collapse/ Expand event of AJAX Collapsible Panel Extender to call javascript ?

  Feb 07, 2008 09:12 PM|LINK

  Where do i place function pageLoad()? In my javascript?

• • Reply
  

  Wilfred Morr...

  Member

  2 Points

  1 Post

  Re: How to track Collapse/ Expand event of AJAX Collapsible Panel Extender to call javascript ?

  Feb 21, 2008 07:32 PM|LINK

  Where can I find a reference to all of the client-side functionallity for these AJAX Control Toolkit controls?

  Can anyone tell me please?

• • Reply
  

  lbassil

  Member

  2 Points

  1 Post

  Re: How to track Collapse/ Expand event of AJAX Collapsible Panel Extender to call javascript ?

  Jul 04, 2008 02:49 PM|LINK

  Hello,

   I was trying the above mentioned solution,  but the "$find("collapsibleBehavior")" section is always returning null. I have added this code to my client side PageLoad() function. Am I missing something? Where should the above code be placed since I noticed you are sending "sender  , args " params to the declared functions?

  Thanks in advance.

  Rgds.

• • Reply
  

  RajVedula

  Member

  18 Points

  8 Posts

  Re: How to track Collapse/ Expand event of AJAX Collapsible Panel Extender to call javascript ?

  Jul 15, 2008 07:59 PM|LINK

  Yes the alerts "I have collapsed and  expanded " showup, but this is what i am looking for.

  I have two collapsiblePanelExtenders opening two different panels on click and need to collapse a panel if expanded before opening the second one.I tried to use your function expandHandler and put a closePanel() method in there as below which didnt work. Any ideas are appreciated.

  function expandHandler( sender , args ){

  closePanel() ;

  alert('I have expanded');

  }

  function closePanel()

  {

  var mp = $("SecondPanel");

  if (mp) {

  if (mp.style.display != "none") {mp.style.display = "none";

  }

  else {

  mp.style.display = "";

  }

  }

  event.returnValue=false; return false;

  }

  collapsablepanel

  • Edited by RajVedula on Jul 15, 2008 09:51 PM
• • Reply
  

  RajVedula

  Member

  18 Points

  8 Posts

  Re: How to track Collapse/ Expand event of AJAX Collapsible Panel Extender to call javascript ?

  Jul 16, 2008 08:44 PM|LINK

  Yes in the javascript.

• • Reply
  

  dineshns

  Member

  7 Points

  24 Posts

  Re: How to track Collapse/ Expand event of AJAX Collapsible Panel Extender to call javascript ?

  Aug 20, 2008 06:27 AM|LINK

   Hi, Your answer is interesting. Can you please help me to solve this issue in my case.

   

  I am using Data List and collapsible panel as shown below. So where do I put the javascript ?
  

   
  

  <asp:DataList ID="MessagesDataList" SkinID="SubjectBox" runat="server"
                  DataSourceID="MessagesObjectDataSource"
                  OnItemDataBound="MessagesDataList_ItemDataBound" >
                  <ItemTemplate>
                      
  
                      <div class="subjectboxpanel">
                          <asp:Panel ID="HeaderPanel" runat="server" Width="100%" >
                              
  
                                  <div>
                                      <div class="subjectboxtxt">
                                          <asp:Image ID="MessageBoxImage" runat="server" /> 
                                          <asp:Image ID="MessageTypeImage" runat="server" />  
                                          
  
                                          <asp:Label ID="SentDateTimeLabel" runat="server"
                                              Text='<%# Eval("SentDateTime") %>' />
                                           - 
                                          <asp:Label ID="TitleLabel" runat="server"
                                              Text='<%# Eval("Title") %>' />
                                      </div>
                                      <div class="subjectboxicon">
                                          <asp:Image ID="CollapsImage" runat="server" ImageUrl="~/images/desc.gif" />
                                      </div>
                                  </div>
                          </asp:Panel>
                      </div>
                      
  
                      <asp:Panel ID="CollapsPanel" runat="server" BackColor="#F2F8FF" Width="100%" Height="100%" >
                          <div style="display:inline-table">
                          <uc3:EstimateView ID="EstimateView1" runat="server" Visible="false" />
                          <uc2:TextMessageView ID="TextMessageView1" runat="server" Visible="false" />
                          <uc1:RequestForProposal ID="ViewRequestForProposal" runat="server" Visible="false" />
                          </div>
                      </asp:Panel>
                      <ajaxControlToolkit:CollapsiblePanelExtender ID="MessageCollapsiblePanelExtender"
                          runat="server" TargetControlID="CollapsPanel" ExpandControlID="HeaderPanel" CollapseControlID="HeaderPanel"
                          SuppressPostBack="true" ImageControlID="CollapsImage" Collapsed="true" ExpandedImage="~/images/top.gif"
                          CollapsedImage="~/images/down.gif" ExpandDirection="Vertical"  />
                  </ItemTemplate>
              </asp:DataList>

    

  Thanks 

   

  Dinesh