ajax collapsible panel extender control gets expanded in the page load in the hosted environment

Posted by balajirnaukri-12656 under ASP.NET on 3/24/2014 | Points: 10 | Views : 2163 | Status : [Member] | Replies : 8
I have page in which I have two panels (ajax collapsible panel) by default I given the coding as panel.collapsed = true;

But still my panel gets expanded in the page load in the hosted environment

Whereas it is collapsed in the local environment(works fine)

I use the <script manager> for using the ajax control

How to overcome this issue in the hosted environment

Thanks and Regards
Balaji.R
ASP.NET Devloper
Solve-IT corp



Responses

Posted by: balajirnaukri-12656 on: 3/24/2014 [Member] Starter | Points: 25

Up
0
Down
can anyone reply me asap

Thanks and Regards
Balaji.R
ASP.NET Devloper
Solve-IT corp

balajirnaukri-12656, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: balajirnaukri-12656 on: 3/24/2014 [Member] Starter | Points: 25

Up
0
Down
very urgent

Thanks and Regards
Balaji.R
ASP.NET Devloper
Solve-IT corp

balajirnaukri-12656, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 3/24/2014 [Member] [MVP] Silver | Points: 25

Up
0
Down
Hi,
Ensure that you have set the collapse property to true in your collapsible panel extender mark up like given below

<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" targetcontrolid="panelBody" collapsed="true" CollapsedSize="0"
collapsecontrolid="panelHeader" expandcontrolid="panelHeader" textlabelid="lblText"
collapsedtext="Show" expandedtext="Hide"
>


Alternatively if you want to collapse the extender on page load then you can do that from server side like given below
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Collapse the extender like given below
this.CollapsiblePanelExtender2.Collapsed = true;
this.CollapsiblePanelExtender2.ClientState = "true";
}
}


Complete Code:
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="panelHeader" runat="server">
<asp:Label ID="lblText" runat="server" Text="Collapsible Panel Demo" />
</asp:Panel>
<asp:Panel ID="panelBody" runat="server" CssClass="cpBody">
This is sample Text
</asp:Panel>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" targetcontrolid="panelBody" collapsed="true" CollapsedSize="0"
collapsecontrolid="panelHeader" expandcontrolid="panelHeader" textlabelid="lblText"
collapsedtext="Show" expandedtext="Hide"
>
</asp:CollapsiblePanelExtender>
</cc1:collapsiblepanelextender>
</ContentTemplate>
</asp:UpdatePanel>


Ensure that you have all the properties related to collapsing the panel set in your mark up.
You can take a look at this link for more details
http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/collapsiblepanel/collapsiblepanel.aspx

Thanks,
A2H
My Blog

balajirnaukri-12656, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: balajirnaukri-12656 on: 3/25/2014 [Member] Starter | Points: 25

Up
0
Down
A2H i tried you code,as you said I have declared my collapsed=true and I have added the !ISPostback condition but still it gets expanded
that to in IE 11 alone



Thanks and Regards
Balaji.R
ASP.NET Devloper
Solve-IT corp

balajirnaukri-12656, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: balajirnaukri-12656 on: 3/25/2014 [Member] Starter | Points: 25

Up
0
Down
Could you tell me your inputs A2H

Thanks and Regards
Balaji.R
ASP.NET Devloper
Solve-IT corp

balajirnaukri-12656, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: balajirnaukri-12656 on: 3/25/2014 [Member] Starter | Points: 25

Up
0
Down
I even gave SuppressPostBack=false

Thanks and Regards
Balaji.R
ASP.NET Devloper
Solve-IT corp

balajirnaukri-12656, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 3/25/2014 [Member] [MVP] Silver | Points: 25

Up
0
Down
Hi,
Unfortunately I don't have an IE 11 machine to test your scenario.If your requirement is to just to create a collapsible panel then
One suggestion is to use Jquery Accordtion control
Check the below link for more details
http://jqueryui.com/accordion/

Sample Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>

<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Test Panel 1
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Test Panel 2
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Test Panel 3
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Test Panel 4
</p>
</div>
</div>

</body>
</html>


You can see a working demo in below link
http://jsbin.com/lamoxuse/1/edit?html,output

Hope this helps

Thanks,
A2H
My Blog

balajirnaukri-12656, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: balajirnaukri-12656 on: 3/25/2014 [Member] Starter | Points: 25

Up
0
Down
No it is a existing one so we cant change it.But it seems to behave like that only in the hosted environment

Thanks and Regards
Balaji.R
ASP.NET Devloper
Solve-IT corp

balajirnaukri-12656, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response