I have a page with a number of collapsiblepanels, each with a nested panel inside it. The top main panel is open when the page loads, but the other panels and all sub-panels start off closed.
It looks something like this when the page is first opened:
----
| Panel1<Open>
| <text>
| Subpanel1 <closed>
---
---
| Panel2 <closed>
---
---
| Panel3 <closed>
---
Any manipulation of panels 2 and 3 or their sub-panels Not shown above) work fine. If I close and then re-open Panel1, it resizes correctly from that point on when subpanel1 is opened or closed. However, if the user clicks to open subpanel1 before any changes to panel1, the subpanel will open but the parent (panel1) will not expand to accommodate its contents.
Any way around this?
You mean to say that panel1 will not resize it self to accomodate the sub-panel1 expansion? Collapsible panels do not resize if the height/width of their content changes. They have a fixed expanded height and width. Have you set ScrollContents to true? That will allow you to view subpanel1 better. Does it clip your content currently? You could set expanded height to be something that will allow it to show subpanel1 contents without having to scroll.
kirtid:
You mean to say that panel1 will not resize it self to accomodate the sub-panel1 expansion?
Yes, that's the problem.
Collapsible panels do not resize if the height/width of their content changes. They have a fixed expanded height and width.
I left ExpandedSize blank and, set this way, Panel2 and Panel3 do in fact resize to fit the contents when SubPanel2 or SubPanel3 are changed - as does Panel1 when SubPanel1 is changed, but _only_ if Panel1 has been closed & opened by the user first.
Have you set ScrollContents to true? That will allow you to view subpanel1 better. Does it clip your content currently? You could set expanded height to be something that will allow it to show subpanel1 contents without having to scroll.
I'm hoping to avoid the scrolling panel if I can, and the contents of the subpanels varies in height so there's no "correct" fixed height to use. I'll scroll it if I have to but I'd rather get it to resize properly.
It seems like there is something specifically different about Panel1- subpanel1 config. Could you post a small, self-sufficient repro? It could be a styling issue.
Not pretty, but sufficient to illustrate the problem:
<%@. Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title><style>.SiteLocHeader{width:100%;height:20px;background-image: url(../Images/bg-menu-small.gif);background-repeat:repeat-x;/* color:#FFF; */vertical-align: middle;}.SiteMainDiv { BORDER-RIGHT: #165EA9 7px solid;BORDER-LEFT: #165EA9 7px solid;BORDER-BOTTOM: #165EA9 7px solid;}.AddrHeaderTextLeft{font-family:verdana;font-size:x-small;font-weight:bold;/* color:white; */float: left;padding-left: 5px;vertical-align: middle;}.ArchiveHeader{background-color: #A5A5A5; color: #FFFFFF;font-family:verdana;font-size:x-small;font-weight:bold;padding-left: 5px;vertical-align: middle;}.SiteContactHeader{width:100%;height:20px;background-image: url(../Images/bg-menu-contact.png);background-repeat:repeat-x;/* color:#FFF; */vertical-align: middle;}.ContactHeaderTextLeft{font-family:verdana;font-size:x-small;font-weight:bold;/* color:#FFF; */float: left;padding-left: 5px;vertical-align: middle;}.SiteContactDiv {BORDER-RIGHT: #0398B8 7px solid;BORDER-LEFT: #0398B8 7px solid;BORDER-BOTTOM: #0398B8 7px solid;}</style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div class="SiteLocHeader"> <div class="AddrHeaderTextLeft"> <asp:Image ID="imgShowAddrToggle" runat="server" ToolTip="Toggle view/edit of current Site Street, Phone, Fax & Web address information" ImageUrl="Images/collapse.jpg"></asp:image> Site Street, Phone, Fax & Web Address</div></div><asp:panel id="pnlSiteLoc" runat="server" cssclass="SiteMainDiv"><table class="table" width="100%" ><tr><td>Some fields & buttons go here</td></tr><tr><td> <asp:Panel runat="server" ID="pnlSiteArchHeader" CssClass="ArchiveHeader"> <asp:Image ID="imgSiteArchToggle" runat="server" ToolTip="Toggle display of archived site address records." ImageUrl="Images/expand.jpg"></asp:image> <asp:Label ID="lblSiteArch" runat="server" Text="Show Archives"></asp:Label> </asp:Panel><asp:Panel runat="server" ID="pnlSiteArchive"> Grid of archive info goes here</asp:Panel><ajaxToolkit:CollapsiblePanelExtender ID="cpeSiteArch" runat="server" CollapsedSize="0" Collapsed="true" ImageControlID="imgSiteArchToggle" ExpandedImage="~/Images/collapse.jpg" CollapsedImage="~/Images/expand.jpg" ExpandDirection="Vertical" TargetControlID="pnlSiteArchive" ExpandedText="Hide Archives" CollapsedText="Show Archives" CollapseControlID="imgSiteArchToggle" ExpandControlID="imgSiteArchToggle" TextLabelID ="lblSiteArch" /></td></tr></table></asp:panel><ajaxToolkit:CollapsiblePanelExtender ID="cpeSiteLoc" runat="server" CollapsedSize="0" Collapsed="false" ImageControlID="imgShowAddrToggle" ExpandedImage="~/Images/collapse.jpg" CollapsedImage="~/Images/expand.jpg" ExpandDirection="Vertical" TargetControlID="pnlSiteLoc" ExpandedText="Hide" CollapsedText="Show" CollapseControlID="imgShowAddrToggle" ExpandControlID="imgShowAddrToggle" /> <div class="SiteContactHeader"> <div class="ContactHeaderTextLeft"> <asp:Image id="imgContactToggle" runat="server" ToolTip="Toggle view/edit of current Site Contact information" ImageUrl="Images/collapse.jpg"></asp:image> Site Contact</div></div><asp:panel ID="pnlSiteContact" runat="server" cssclass="SiteContactDiv"><table class="table" ><tr><td>More fields here</td></tr><tr><td colSpan="2"><asp:Panel runat="server" ID="pnlContactArchHeader" CssClass="ArchiveHeader"> <asp:Image ID="imgContArchToggle" runat="server" ToolTip="Toggle display of archived Contact records." ImageUrl="Images/expand.jpg"></asp:image> <asp:Label ID="lblContArch" runat="server" Text="Show Archives"></asp:Label> </asp:Panel><asp:Panel runat="server" ID="pnlContArchive">More archive info in this sub-panel</asp:Panel><ajaxToolkit:CollapsiblePanelExtender ID="cpeContArchive" runat="server" CollapsedSize="0" Collapsed="true" ImageControlID="imgContArchToggle" ExpandedImage="~/Images/collapse.jpg" CollapsedImage="~/Images/expand.jpg" ExpandDirection="Vertical" TargetControlID="pnlContArchive" ExpandedText="Hide Archives" CollapsedText="Show Archives" CollapseControlID="imgContArchToggle" ExpandControlID="imgContArchToggle" TextLabelID ="lblContArch" /></td></tr></table></asp:panel><ajaxToolkit:CollapsiblePanelExtender ID="cpeSiteContact" runat="server" CollapsedSize="0" Collapsed="true" ImageControlID="imgContactToggle" ExpandedImage="~/Images/collapse.jpg" CollapsedImage="~/Images/expand.jpg" ExpandDirection="Vertical" TargetControlID="pnlSiteContact" ExpandedText="Hide" CollapsedText="Show" CollapseControlID="imgContactToggle" ExpandControlID="imgContactToggle" /> </form></body></html>I got the same problem and would be very interested in a solution, too.
In my case, I have a nested UpdatePanel inside a Panel extended with CollapsiblePanelExtender. The panel opens fine, but if the UpdatePanel grows after a partial update, the collapsible panel does not resize to fit it's new content. I also did not set the ExpandedSize property to have the panel autofit it's content. If I collapse and expand the collapsible panel again after an update to the UpdatePanel, it sizes itself correctly to the new size.
I tried this and the TargetPanel expanded fine after the partial update. In the example attached the collapsible panels expand fine. Is there somethng in my sample I need to tweak?
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel runat="Server" ID="Panel1Header" BackColor="Pink" Height="30">
</asp:Panel>
<asp:Panel runat="Server" ID="Panel1" Height="0" BackColor="Red">
<asp:Panel runat="server" ID="subpanel1Header" Height="30">
</asp:Panel>
<asp:Panel runat="Server" ID="subpanel1">
<asp:UpdatePanel runat="Server" ID="updatepanel1">
<ContentTemplate>
<asp:Button runat="server" ID="button1" OnClick="button1_Click" Text="expand panel" />
<asp:Label runat="server" ID="label1"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender runat="server" ID="CollapsiblePanelExtender1" TargetControlID="SubPanel1"
CollapseControlID="SubPanel1Header" ExpandControlID="SubPanel1Header" CollapsedText="Expand subpanel..."
Collapsed="true" ExpandedText="Collapse subpanel...">
</ajaxToolkit:CollapsiblePanelExtender>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender runat="server" ID="cpOuter" TargetControlID="Panel1"
CollapseControlID="Panel1Header" ExpandControlID="Panel1Header" CollapsedText="Expand..."
Collapsed="true" ExpandedText="Collapse">
</ajaxToolkit:CollapsiblePanelExtender>
protected void button1_Click(object sender, EventArgs e) {this.label1.Text ="sxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslg sxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslg sxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslg"; } Yes, you have to ;)
The UpdatePanel should server like a pseudo DynamicPopulate, just without the web service call. So the idea is, that I have multiple collapsible panels in parallel forming a list with collapsible content. The inner controls of the panels are not yet initialized, i.e. the controls do not exist yet. So if now a panel is expanded the postback to the server for the UpdatePanel is made while the panel is expanding - so there is even a racing condition. You modified example would look like this:
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<div>
<asp:Panelrunat="Server"ID="Panel1Header"BackColor="LightBlue"Height="30">
<asp:LabelID="Label2"runat="server"onclick="document.getElementById('button1').click()">click me</asp:Label>
</asp:Panel>
<asp:Panelrunat="Server"ID="Panel1"Height="0"BackColor="Gray">
<asp:UpdatePanelrunat="Server"ID="updatepanel1">
<ContentTemplate>
<asp:Buttonrunat="server"ID="button1"OnClick="button1_Click"Text="expand panel"/>
<asp:Labelrunat="server"ID="label1"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtenderrunat="server"ID="cpOuter"TargetControlID="Panel1"
CollapseControlID="Label2"ExpandControlID="Label2"CollapsedText="Expand..."
Collapsed="true"ExpandedText="Collapse">
</ajaxToolkit:CollapsiblePanelExtender>
A better option is to actually raise events in the CollapsiblePanel before collapsing/expanding and after collapsed/expanded actions are done. We do plan to add those. You can perform any databinding/ partial post backs in those.
I am not hitting the race condition.
Here is what I tried:
<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager2" runat="server" /> <div> <asp:UpdatePanel runat="server" ID="updatePanelOuter"> <Triggers> <asp:AsyncPostBackTrigger ControlID="image1" /> </Triggers> <ContentTemplate> <asp:Panel runat="Server" ID="Panel1Header" BackColor="LightBlue" Height="30"> <asp:ImageButton ID="image1" runat="server" ImageUrl="~/Calendar.gif" OnClick="button1_Click"> </asp:ImageButton> </asp:Panel> <asp:Panel runat="Server" ID="Panel1" Height="0" BackColor="Gray"> <asp:Label runat="server" Text="Fooooo"></asp:Label> <asp:UpdatePanel runat="Server" ID="updatepanel1"> <ContentTemplate> <asp:Button runat="server" ID="button1" Visible="false" OnClick="button1_Click" Text="expand panel" /> <asp:GridView ID="GridView1" runat="server" AllowSorting="True" CellPadding="4" ForeColor="#333333" GridLines="None"> <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" /> <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" /> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="Delete" InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="Select" TypeName="SessionTodoXmlDataObject" UpdateMethod="Update"> <DeleteParameters> <asp:Parameter Name="Original_ItemID" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="Title" Type="String" /> <asp:Parameter Name="Description" Type="String" /> <asp:Parameter Name="Priority" Type="Int32" /> <asp:Parameter Name="Original_ItemID" Type="Int32" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="Title" Type="String" /> <asp:Parameter Name="Description" Type="String" /> <asp:Parameter Name="Priority" Type="Int32" /> </InsertParameters> </asp:ObjectDataSource> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/TodoItems.xml"> </asp:XmlDataSource> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender runat="server" ID="cpOuter" TargetControlID="Panel1" CollapseControlID="image1" ExpandedSize="-1" ExpandControlID="image1" CollapsedText="Expand..." Collapsed="true" ExpandedText="Collapse" ImageControlID="image1"> </ajaxToolkit:CollapsiblePanelExtender> </ContentTemplate> </asp:UpdatePanel> </div> <asp:Panel runat="Server" ID="Panel2" BackColor="Lime" Height="30"> <asp:Label ID="Label2" runat="server" >FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr</asp:Label> </asp:Panel> <asp:Panel runat="Server" ID="Panel3" Height="0" BackColor="Gray"> FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender runat="server" ID="CollapsiblePanelExtender1" TargetControlID="Panel3" CollapseControlID="Label2" ExpandControlID="Label2" CollapsedText="Expand..." Collapsed="true" ExpandedText="Collapse"> </ajaxToolkit:CollapsiblePanelExtender>
protected void button1_Click(object sender, EventArgs e) {this.GridView1.DataSourceID ="ObjectDataSource1";this.GridView1.DataBind(); }
