I'm having an intermittent problem with the CollapsiblePanelExtender.
The way we are using them is to wrap it around a gridview, so that only the header-row is displayed(which contains a checkbox for select all) while collapsed. The page always load as collapsed.
about 95% of the time, this will work perfectly fine, however, once in a while the cpe loads with the right height set, but display:none as style instead of display:block.
This results in the panel being fully "collapsed". It's still possible to extend it, and when you subsequently collapse it, it works as intended.
Have anyone else experienced the same kind of issues with CPE?
Main usercontrol:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FlightFareExplorer.ascx.cs"
Inherits="UserControls_Rowfilters_FlightFareExplorer" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="FareBasis.ascx" TagName="FareBasis" TagPrefix="uc4" %>
<%@ Register Src="Flight.ascx" TagName="Flight" TagPrefix="uc3" %>
<%@ Register Assembly="BusyBoxDotNet" Namespace="BusyBoxDotNet" TagPrefix="busyboxdotnet" %>
<busyboxdotnet:BusyBox ID="bsbWait" runat="server" Position="Center" ShowBusyBox="Custom"
Image="Custom" OverlayOpacity="25" ImageUrl="/Images/Misc/logo_anim.gif" Text="Your query is currently being processed" />
<asp:UpdatePanel ID="upHeader" ChildrenAsTriggers="false" UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<cc1:AnimationExtender runat="server" ID="aeTest" TargetControlID="pnlMenu">
<Animations>
<OnClick>
<Sequence>
<StyleAction AnimationTarget="pnlSettings" attribute="display" value="none" />
<StyleAction AnimationTarget="pnlSettings" attribute="zIndex" value="-100" />
<StyleAction AnimationTarget="pnlMenu" attribute="display" value="none" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<cc1:AnimationExtender runat="server" ID="AnimationExtender1" TargetControlID="pnlHeader">
<Animations>
<OnClick>
<Sequence>
<StyleAction AnimationTarget="pnlMenu" attribute="display" value="block" />
<StyleAction AnimationTarget="pnlSettings" attribute="zIndex" value="1000" />
<StyleAction AnimationTarget="pnlSettings" attribute="display" value="inline" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<div style="height: 18px; overflow: hidden;">
<div onclick="__doPostBack('<%= upFlightFare.ClientID %>', 'Open');">
<asp:Panel runat="server" ID="pnlHeader" CssClass="boxDataHead" Width="100%" onmouseover="document.body.style.cursor='pointer';"
onmouseout="document.body.style.cursor='default';">
<asp:Label runat="server" ID="lblHeader">Flight/Fare Details</asp:Label>
<asp:Image runat="server" ID="imgCollapsed" ImageUrl="~/Images/Misc/Pil_h_7x7_wh_bggreen.gif" />
</asp:Panel>
</div>
<div onclick="__doPostBack('<%= upFlightFare.ClientID %>', 'Close');">
<asp:Panel runat="server" ID="pnlMenu" CssClass="boxDataHead float" Width="100%"
onmouseover="document.body.style.cursor='pointer';" onmouseout="document.body.style.cursor='default';">
<asp:Label runat="server" ID="lblMenu">Flight/Fare Details(Click here to close)</asp:Label>
<asp:Image runat="server" ID="imgExpanded" ImageUrl="~/Images/Misc/Pil_ned_7x7_wh_bggreen.gif" />
</asp:Panel>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel runat="server" ID="pnlSettings" CssClass="FFE">
<asp:UpdateProgress ID="upExplorer" runat="server" AssociatedUpdatePanelID="upFlightFare"
DisplayAfter="50">
<ProgressTemplate>
<table border="0">
<tr>
<td rowspan="2">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Misc/logo_anim.gif" />
</td>
<td>
<p style="margin: 15px 10px 0px; font-weight: bold; font-style: normal; font-size: 11pt;
font-family: Verdana; color: black;">
Please wait</p>
</td>
</tr>
<tr>
<td>
<p id="ctl00_cntMain_ucAnalysisSettings_bsbWaitText" style="margin: 20px 10px 15px;
font-weight: normal; font-style: normal; font-size: 8pt; font-family: Verdana;
color: black;">
Your query is currently being processed</p>
</td>
</tr>
</table>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" ID="upFlightFare">
<ContentTemplate>
<cc1:AnimationExtender runat="server" ID="AnimationExtender2" TargetControlID="btnResetSelection">
<Animations>
<OnClick>
<Sequence>
<StyleAction AnimationTarget="pnlSettings" attribute="display" value="none" />
<StyleAction AnimationTarget="pnlSettings" attribute="zIndex" value="-100" />
<StyleAction AnimationTarget="pnlMenu" attribute="display" value="none" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<cc1:AnimationExtender runat="server" ID="AnimationExtender3" TargetControlID="btnClose">
<Animations>
<OnClick>
<Sequence>
<StyleAction AnimationTarget="pnlSettings" attribute="display" value="none" />
<StyleAction AnimationTarget="pnlSettings" attribute="zIndex" value="-100" />
<StyleAction AnimationTarget="pnlMenu" attribute="display" value="none" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<div class="boxDataFullCtrl">
<div style="text-align: right">
<asp:Button ID="btnUpdate" runat="server" Text="Save & Update" OnClick="btnUpdate_Click"
ToolTip="Saves your current selection and requeries the database" CssClass="ctrl ctrlABtnL" />
<asp:Button ID="btnResetSelection" runat="server" Text="Reset" OnClick="btnResetSelection_Click"
ToolTip="Resets all filters and closes the window" CssClass="ctrl ctrlABtn" />
<asp:Button ID="btnClose" runat="server" Text="Close" ToolTip="Closes the window without saving your changes"
CssClass="ctrl ctrlABtn" />
</div>
<table border="0">
<tr>
<td valign="top">
<uc3:Flight ID="ucFlightOutFilter" runat="server" ReturnFlights="false" SessionKey="Out" />
<br />
<uc4:FareBasis ID="ucFareBasisOutFilter" runat="server" ReturnFares="false" SessionKey="Out" />
</td>
<td valign="top">
<uc3:Flight ID="ucFlightHomeFilter" runat="server" ReturnFlights="true" SessionKey="Home" />
<br />
<uc4:FareBasis ID="ucFareBasisHomeFilter" runat="server" ReturnFares="true" SessionKey="Home" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpdate" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
Embedded usercontrol:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Flight.ascx.cs" Inherits="UserControls_FlightFilter" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<table border="0" cellpadding="3">
<tr>
<td style="background-color: #F8F8F8;">
<cc1:CollapsiblePanelExtender runat="server" ID="cpeFlights" TargetControlID="pnlFlightsContent"
CollapsedSize="0" Collapsed="false" ExpandControlID="pnlFlightsHeader" CollapseControlID="pnlFlightsHeader"
ExpandDirection="Vertical" ImageControlID="imgHeaderExpand" CollapsedImage="~/Images/Misc/plus.gif"
ExpandedImage="~/Images/Misc/minus.gif" SuppressPostBack="true" />
<asp:Panel ID="pnlFlightsHeader" runat="server">
<asp:ImageButton ID="imgHeaderExpand" CommandName="Expand" runat="server" ImageUrl="~/Images/Misc/plus.gif" />
<asp:Label ID="lblHeader" runat="server" Style="font-weight: bold;">Flights</asp:Label>
</asp:Panel>
<asp:Panel ID="pnlFlightsContent" runat="server">
<asp:Label ID="lblNoDataWarning" runat="server" CssClass="ctrl err" Visible="false">We we're unable to locate any flights for your current search parametres.</asp:Label>
<asp:Repeater runat="server" ID="rptFlights" OnItemDataBound="rptFlights_ItemDataBound">
<ItemTemplate>
<cc1:CollapsiblePanelExtender runat="server" ID="cpeGrid" TargetControlID="pnlFlight"
CollapsedSize="22" Collapsed="true" ExpandControlID="pnlOpenClose" CollapseControlID="pnlOpenClose"
ExpandDirection="Vertical" ImageControlID="imgExpand" CollapsedImage="~/Images/Misc/plus.gif"
ExpandedImage="~/Images/Misc/minus.gif" SuppressPostBack="true" />
<asp:PlaceHolder runat="server" ID="plhCarrier" Visible="false">
<asp:Panel runat="server" ID="pnlOpenClose">
<asp:Label runat="server" ID="lblCount" Style="float: right; padding-right: 4px;
color: #008800; font-weight: bold;"></asp:Label>
<div id="spnWeekHeader" class="tblHead" style="width: 207px; font-size: 11px; font-weight: bold;
border: solid 1px black; border-bottom: 0px;" runat="server">
<asp:ImageButton ID="imgExpand" CommandName="Expand" runat="server" ImageUrl="~/Images/Misc/plus.gif" />
<asp:Label runat="server" ID="lblrepeater">TEST</asp:Label>
</div>
</asp:Panel>
<asp:Panel runat="server" ID="pnlFlight" Height="22px" Style="overflow: hidden;">
<asp:GridView ID="gdvFlights" runat="server" AutoGenerateColumns="false" OnRowDataBound="gdvFlights_RowDataBound"
OnDataBound="gdvFlights_DataBound" CssClass="tbl ctrl">
<RowStyle BorderColor="black" BorderWidth="1px" BorderStyle="Solid" />
<AlternatingRowStyle CssClass="altRow" />
<HeaderStyle CssClass="tblHead" Wrap="true" />
<Columns>
<asp:TemplateField HeaderStyle-CssClass="tblHeadAdv" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:CheckBox ID="chkSelectAllFlight" runat="server" Checked="false" AutoPostBack="false" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelectFlight" runat="server" Checked="false" AutoPostBack="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FlightNo" HeaderText="Flight Number" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Origin" HeaderText="Origin" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Destination" HeaderText="Destination" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="POS" HeaderText="POS" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Carrier" HeaderText="Carrier" HtmlEncode="false" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundField HeaderText="Dep. time" DataField="DepartureTime" HtmlEncode="false"
HeaderStyle-CssClass="tblHeadAdv" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="StopOver" HeaderText="Via" HeaderStyle-CssClass="tblHeadAdv"
ItemStyle-HorizontalAlign="Center" />
</Columns>
</asp:GridView>
</asp:Panel>
</asp:PlaceHolder>
<br />
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
</td>
</tr>
</table>
Can't post embedded images due to new user status, so here it the imageshack link. http://img208.imageshack.us/gal.php?g=workingp.jpg
