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

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

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.

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
 

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

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

Can anyone tell me please?

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.

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.

if (mp) {

else {

Yes in the javascript.

 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