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

Question

User-2007897091 posted

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. <?xml:namespace prefix = ajax /><ajax:CollapsiblePanelExtender id=cpeSOP TargetControlID="pnlSearchCriteria" SuppressPostBack="true" ImageControlID="Image1" ExpandedImage="~/public/img/arrowDownWhite.gif" ExpandDirection="Vertical" ExpandControlID="pnlCollapsable" CollapsedImage="~/public/img/arrowRightWhite.gif" Collapsed="True" CollapsedSize="0" CollapseControlID="pnlCollapsable" runat="Server"></ajax:CollapsiblePanelExtender>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

Answer 1

User-1500755525 posted

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

Answer 2

User-2007897091 posted

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.

 

 

Answer 3

User502769159 posted

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
 

 
 

Answer 4

User-322257070 posted

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

Answer 5

User1411123246 posted

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

Can anyone tell me please?

Answer 6

User-1608604924 posted

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.

Answer 7

User1235520637 posted

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;

}

Answer 8

User1235520637 posted

Yes in the javascript.

Answer 9

User-914950404 posted

 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

Answer 10

User348597747 posted

Just a quick correction to the original answer to this post:

This line is incorrect: $find("collapsibleBehavior").add_add_collapseComplete( collapseHandler );

It should be this:  $find("collapsibleBehavior").add_collapseComplete( collapseHandler );

Answer 11

User839650768 posted

Hi, Phani Raj

I tried your code, its fine if I use single CollapsiblePanel on page, but I am using Collapsible panel inside the repeater where this code doen't work.

How can I make it work inside the repeater.. Please help.

Answer 12

User411669167 posted

Within the pageLoad function I would place this two lines right before adding the events handlers

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

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

 

Answer 13

User1658248490 posted

thanks 

Phanatic...

It is really helpful...

Answer 14

User312465436 posted

Oh Man...this is da Bomb.  Works great.  Only snafu I ran into was not setting SuppressPostBack="true".  Once I did it worked great.  Thanks