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 : 3461 | Status : [Member] | Replies : 8

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

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

Reply | Reply with Attachment

Alert Moderator

Responses

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

0	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

0	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

0	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

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

0	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

0	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

0	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

0	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

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

0	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

Latest Posts