Dynamic extenders - CollapsiblePanelExtender in ItemTemplate

Hello everybody,

I am new in this forum and that's my first post...

I am using formview(line 30) and inside the ItemTemplate I have put CollapsiblePanelExtenders(line 45).

The thing is that on the page load the form view shows the empty template and once the form view has data, the collapsible panels does not work - the header and the content are visible and the header panel does not react to mouse clicks - like I have no extenders.

I do want to mention the following facts:

1. I haveworking collapsible panels outside the form view(lines 1,6)

2. the form view is inside update panel (conditional update mode - line 28)

I guess the thing is that the form view extenders loaded dynamically and are not registered in the script manager...
I have the same problem with the popup extender as well (loaded dynamically) so maybe I miss something substantial...?

Below is my code.

Thanks a lot!

1<%--static extender ( always on page ) and works perfect--%>2 <ajaxToolkit:CollapsiblePanelExtender ID="ajaxCPExtCampDetails" runat="Server" TargetControlID="CampDetails_ContentPanel"3 ExpandControlID="CampDetails_HeaderPanel" CollapseControlID="CampDetails_HeaderPanel"4 ImageControlID="CampDetails_ToggleImage" ExpandedImage="~/img/collapse.jpg" CollapsedImage="~/img/expand.jpg"5 SuppressPostBack="true" Collapsed="true" />6<%--static extender ( always on page ) and works perfect--%>7 <ajaxToolkit:CollapsiblePanelExtender ID="ajaxCPExtCampSummeries" runat="Server"8 TargetControlID="CampSummeries_ContentPanel" ExpandControlID="CampSummeries_HeaderPanel"9 CollapseControlID="CampSummeries_HeaderPanel" ImageControlID="CampSummeries_ToggleImage"10 ExpandedImage="~/img/collapse.jpg" CollapsedImage="~/img/expand.jpg" SuppressPostBack="true"11 Collapsed="false" />12 <asp:Panel ID="CampSummeries_HeaderPanel" runat="server" Height="20px" Width="800px"13 BackColor="#C0C0FF">14 <div class="CollapsibleHeaderPanel">15 <asp:Image ID="CampSummeries_ToggleImage" runat="server" ImageUrl="~/img/collapse.jpg" />16 <asp:Label ID="CampSummeries_ToggleLabel" runat="server" SkinID="lblHdrPnl">Campaigns Summeries</asp:Label>17 </div>18 </asp:Panel>19 <asp:Panel ID="CampSummeries_ContentPanel" runat="server" Width="800px">20 <asp:Panel ID="CampDetails_HeaderPanel" runat="server" Width="800px" Height="20px"21 BackColor="#C0C0FF">22 <div class="CollapsibleHeaderPanel">23 <asp:Image ID="CampDetails_ToggleImage" runat="server" ImageUrl="~/img/collapse.jpg" />24 <asp:Label ID="CampDetails_ToggleLabel" runat="server" SkinID="lblHdrPnl">Campaign Details</asp:Label>25 </div>26 </asp:Panel>27 <asp:Panel ID="CampDetails_ContentPanel" runat="server" Width="800px">28 <asp:UpdatePanel ID="UpdatePanelCampDetails" runat="server" UpdateMode="Conditional">29 <ContentTemplate>30 <asp:FormView ID="fvDetails" runat="server"31 DataSourceID="odsDetails" Width="800px" BackColor="Transparent" DefaultMode="ReadOnly"32 OnDataBound="fvDetails_DataBound" OnItemCommand="fvDetails_ItemCommand">33 <EditItemTemplate>34 Empty35 </EditItemTemplate>36 <InsertItemTemplate>37 InsertItemTemplate - Not implemented yet38 </InsertItemTemplate>39 <ItemTemplate>40 <div style="padding-left: 10px">4142<%---------------------%>43 <%-------thie one does not work--------%>44 <%--------Loaded dynamically----------%>45 <ajaxToolkit:CollapsiblePanelExtender runat="server" ID="ajaxCPExtBasisFieldsVS1P"46 TargetControlID="BasisFieldsVS1P_ContentPanel"47 ExpandControlID="BasisFieldsVS1P_HeaderPanel"48 CollapseControlID="BasisFieldsVS1P_HeaderPanel"49 ImageControlID="BasisFieldsVS1P_ToggleImage"50 ExpandedImage="~/img/collapse.jpg"51 CollapsedImage="~/img/expand.jpg"52 SuppressPostBack="True"53 Collapsed="True" />54 <asp:Panel ID="BasisFieldsVS1P_HeaderPanel" runat="server" Width="750px">55 <div class="CollapsibleHeaderPanel">56 <asp:Image ID="BasisFieldsVS1P_ToggleImage" runat="server" ImageUrl="~/img/collapse.jpg" />57 <asp:Label ID="BasisFieldsVS1P_ToggleLabel" runat="server" SkinID="lblHdrPnl" Text="<%$ Resources:AdminVSMI1Res, BasisFields%>"></asp:Label>58 </div>59 </asp:Panel>60 <asp:Panel ID="BasisFieldsVS1P_ContentPanel" runat="server" Width="750px">61 some binded content62 </asp:Panel>63 </div>64 <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"65 Text="Update">66 </asp:LinkButton>67 <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"68 Text="Cancel">69 </asp:LinkButton>70 </ItemTemplate>71 <EmptyDataTemplate>72 No campaign was chosen.73<%---%>74 </EmptyDataTemplate>75 </asp:FormView>76 </ContentTemplate>77 <Triggers>78 <asp:AsyncPostBackTrigger ControlID="gvVS1P" EventName="SelectedIndexChanged" />79 </Triggers>80 </asp:UpdatePanel>81 </asp:Panel>82 </asp:Panel>83

Maybe:http://forums.asp.net/thread/1441672.aspx

DropDownList controls doesnt show the data after postback.

I am using a FormView and ajaxToolkit:CollapsiblePanelExtender. My DropDownLists show the data the first time, but after I press a button and it does a post back, the DropDownLists does not show the data even though I can debug and see that I am adding the items in the code-behind. Please help.

<asp:FormViewID="FormView1"runat="server"DataKeyNames="ID"DataSourceID="CslaDataSource1"DefaultMode="Insert"Width="95%">

<InsertItemTemplate>

<tableborder="0"width="100%">

<tr>

<tdalign="left">

<asp:PanelID="description_HeaderPanel"runat="server"style="cursor: pointer;">

<div>

<asp:ImageButtonID="Description_ToggleImage"runat="server"ImageUrl="~/Image/plus.gif"AlternateText="collapse"/> Search

</div>

</asp:Panel>

<asp:Panelid="description_ContentPanel"runat="server"style="overflow:hidden;">

<tableborder="0">

<tr>

<tdcolspan="6"> </td>

</tr>

<tr>

<tdalign="right">Alert ID:</td>

<td><asp:TextBoxID="txtID"runat="server"Text='<%# Bind("ID") %>'/></td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<tdalign="right"style="width:16.5%">Server:</td>

<tdstyle="width:16.5%"><asp:TextBoxID="txtServer"runat="server"Text='<%# Bind("Server") %>'/></td>

<tdalign="right"style="width:16.5%">Source:</td>

<tdstyle="width:16.5%">

<asp:DropDownListID="ddlSource"runat="server"SelectedValue='<%# Bind("Source") %>'>

<asp:ListItemValue="0"Text=""/>

</asp:DropDownList>

</td>

<tdalign="right"style="width:16.5%">Manager:</td>

<td>

<asp:DropDownListID="ddlManager"runat="server"SelectedValue='<%# Bind("Manager") %>'>

<asp:ListItemValue="0"Text=""/>

</asp:DropDownList>

</td>

</tr>

<tr>

<tdalign="right">Type:</td>

<td>

<asp:DropDownListID="ddlType"runat="server"SelectedValue='<%# Bind("Type") %>'>

<asp:ListItemValue="0"Text=""/>

</asp:DropDownList>

</td>

<tdalign="right">Severity:</td>

<td>

<asp:DropDownListID="ddlSeverity"runat="server"SelectedValue='<%# Bind("Severity") %>'>

<asp:ListItemValue="0"Text=""/>

</asp:DropDownList>

</td>

<tdalign="right">Detail:</td>

<td><asp:TextBoxID="txtDetail"runat="server"Text='<%# Bind("Detail") %>'/></td>

</tr>

<tr>

<tdalign="right">From:</td>

<td>

<asp:TextBoxID="txtFrom"runat="server"/> <asp:ImageButtonrunat="Server"ID="Image1"ImageUrl="~\Image\Calendar.png"AlternateText="Click to show calendar"/>

<ajaxToolkit:CalendarExtenderID="ajaxCalendar1"runat="server"TargetControlID="txtFrom"PopupButtonID="Image1"/>

</td>

<tdalign="right">To:</td>

<td>

<asp:TextBoxID="txtTo"runat="server"/> <asp:ImageButtonrunat="Server"ID="Image2"ImageUrl="~\Image\Calendar.png"AlternateText="Click to show calendar"/>

<ajaxToolkit:CalendarExtenderID="ajaxCalendar2"runat="server"TargetControlID="txtTo"PopupButtonID="Image2"/>

</td>

<td> </td>

<td> </td>

</tr>

<tr>

<tdalign="right">Status:</td>

<td>

<asp:DropDownListID="ddlStatus"runat="server"SelectedValue='<%# Bind("Status") %>'>

<asp:ListItemValue="0"Text=""/>

</asp:DropDownList>

</td>

<tdalign="right">Ticket ID:</td>

<td><asp:TextBoxID="txtTicketID"runat="server"Text='<%# Bind("Ticket") %>'/></td>

<td> </td>

<td> </td>

</tr>

<tr>

<tdcolspan="6"> </td>

</tr>

<tr>

<tdalign="center"colspan="6"><asp:ButtonID="btnSubmit"runat="server"Text="Submit"CausesValidation="false"CommandName="Insert"/></td>

</tr>

<tr>

<tdcolspan="6"> </td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

</table>

<ajaxToolkit:CollapsiblePanelExtenderID="cpeSearch"runat="Server"TargetControlID="description_ContentPanel"ExpandControlID="description_HeaderPanel"CollapseControlID="description_HeaderPanel"Collapsed="true"ImageControlID="description_ToggleImage"ExpandedText="(Hide Details...)"CollapsedText="(Show Details...)"ExpandedImage="~/Image/minus.gif"CollapsedImage="~/Image/plus.gif"/>

</InsertItemTemplate>

</asp:FormView>

Hi, ensure your dropdownlistbox are only loaded on page load - try something like this:

Protected Sub Page_Load(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.LoadIf Not IsPostBackThen'Load the DropdownListbox with number 1 to 10Dim aAs Int16For a = 1To 10 DrpLstTest.Items.Add(a)Next aEnd If End Sub

Thanks.

That was the first thing I tried. It didn't solve the problem.

I think the problem has to do with FormView, AJAX's CollapsiblePanelExtender, and ASP.NET.

Please help!