Sunday, March 11, 2012

CollapsiblePanelExtender.Collapsed proberty

Hi,Ahmed Zahran

I am afraid we cannot find out the exact root cause without further information captured when the problem occurs.

To troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.

Thank you.


Hi Ahmed,

I'm afraid that we cannot achieve what you want by using Collapsed property on the server side.Here is the source code ,which indicates why:

/// <summary>
/// Signals the initial collapsed state of the control. Note this will not cause
/// an expanded control to collapse at initialization, but rather tells the extender
/// what the initial state of the Panel control is.
/// </summary>
[DefaultValue(false)]
[ExtenderControlProperty]
public bool Collapsed
{
get { return GetPropertyValue("Collapsed", false); }
set { SetPropertyValue("Collapsed", value); }
}

It gets the property , which is defined in your aspx file. See below:

<ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server"
TargetControlID="Panel1"
ExpandControlID="Panel2"
CollapseControlID="Panel2"
Collapsed="False"
TextLabelID="Label1"
ImageControlID="Image1"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ExpandedImage="../pic/collapse_blue.jpg"
CollapsedImage="../pic/expand_blue.jpg"
SuppressPostBack="true"/>

So whenever the CollapsiblePanelExtender is expanded or collapsed, CollapsiblePanelExtender.Collapsed will not changed. Then, how to get the state? Here is my solution:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> </script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>ClickEvent</title> <style type="text/css"> .collapsePanel { background-color:white; overflow:hidden; } .collapsePanelHeader{ width:100%; height:30px; background-image: url(../pic/bg-menu-main.png); background-repeat:repeat-x; color:#FFF; font-weight:bold; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server" width="300"></asp:TextBox> <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px"> <div style="padding:5px; cursor: pointer; vertical-align: middle;" onclick="getCollapsibleState()"> <div style="float: left;">What is ASP.NET AJAX?</div> <div style="float: left; margin-left: 20px;"> <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label> </div> <div style="float: right; vertical-align: middle;"> <asp:ImageButton ID="Image1" runat="server" ImageUrl="../pic/expand_blue.jpg" AlternateText="(Show Details...)"/> </div> </div> </asp:Panel> <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate><%=DateTime.Now.ToString()%> <div style="display:none"> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel> </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server" TargetControlID="Panel1" ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="False" TextLabelID="Label1" ImageControlID="Image1" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)" ExpandedImage="../pic/collapse_blue.jpg" CollapsedImage="../pic/expand_blue.jpg" SuppressPostBack="true"/> <script type="text/javascript" language="javascript"> var objExtender; function getCollapsibleState(){ if(objExtender == null) objExtender = $find("<%=cpeDemo.ClientID%>"); if(objExtender.get_Collapsed()){//open $get("<%=TextBox1.ClientID%>").value="openNow it is getting expanded!"; $get("<%=Button1.ClientID%>").click(); } else{ //close $get("<%=TextBox1.ClientID%>").value="Now it is getting collapsed!"; } } </script> </form></body></html>
I will mark it as "answered", if you have any problems, please feel free to reply at this url :http://forums.asp.net/p/1138990/1832172.aspx#1832172 since they are the same problem.
Hope it helps.
 

No comments:

Post a Comment