Dynamic Extenders in AJAX beta - Please Help!

Ive managed to update my site to AJAX beta and ive got everything up and running again except for dynamic extenders! Please can anyone help, this driving me nuts!!!

Im trying to create a dynamic list of news feeds, organised by category. Where each category has its own collapsible extender.

In ATLAS i could just do this:

<asp:RepeaterID="RepeaterNewsCategorys"runat="server"DataSourceID="SqlAllNewsSourceCategorys">

<ItemTemplate>

<trclass="ItemTitle">

<tdalign="left">

<b><asp:LabelID="lblNewsCategory"runat="server"><%#Eval("Name")%></asp:Label></b>

</td>

<tdalign="right">

<asp:ImageID="imgNewsCategory"runat="server"/>

</td>

</tr>

<tr>

<tdcolspan="2">

<asp:PanelID="PanelNewsCategory"runat="server">

<asp:CheckBoxListID="chkNewsCategoryFeeds"runat="server"DataTextField="Name"DataValueField="ID"OnDataBound="chkNewsFeeds_DataBound"OnSelectedIndexChanged="chkNewsFeeds_SelectedIndexChanged"></asp:CheckBoxList>

</asp:Panel>

<AtlasControl:CollapsiblePanelExtenderID="CollapsibleNewsCategory"runat="Server">

<AtlasControl:CollapsiblePanelPropertiesTargetControlID="PanelNewsCategory"ExpandControlID="imgNewsCategory"CollapseControlID="imgNewsCategory"Collapsed="True"TextLabelID="lblNewsCategory"

ImageControlID="imgNewsCategory"ExpandedImage="../Images/Icons/Collapse.jpg"CollapsedImage="../Images/Icons/Expand.jpg"/>

</AtlasControl:CollapsiblePanelExtender>

</td>

</tr>

</ItemTemplate>

</asp:Repeater>

Nice and easy and everything worked fine. Now after updating to AJAX beta, none of the collapsible extenders are rendered and none of the images are loaded.

I read another post about dynamic extenders, and tried to create the extenders in the repeaters ItemDataBound.

<asp:RepeaterID="RepeaterNewsCategorys"runat="server"DataSourceID="SqlAllNewsSourceCategorys">

<ItemTemplate>

<trclass="ItemTitle">

<tdalign="left">

<b><asp:LabelID="lblNewsCategory"runat="server"><%#Eval("Name")%></asp:Label></b>

</td>

<tdalign="right">

<asp:ImageID="imgNewsCategory"runat="server"/>

</td>

</tr>

<tr>

<tdcolspan="2">

<asp:PanelID="PanelNewsCategory"runat="server">

<asp:CheckBoxListID="chkNewsCategoryFeeds"runat="server"DataTextField="Name"DataValueField="ID"OnDataBound="chkNewsFeeds_DataBound"OnSelectedIndexChanged="chkNewsFeeds_SelectedIndexChanged"></asp:CheckBoxList>

</asp:Panel>

</td>

</tr>

</ItemTemplate>

</asp:Repeater>

Code Behind:

ProtectedSub RepeaterNewsCategorys_ItemDataBound(ByVal senderAsObject,ByVal eAs System.Web.UI.WebControls.RepeaterItemEventArgs)Handles RepeaterNewsCategorys.ItemDataBound

'Find Controls

Dim holdExpandLabelAs Label

Dim holdExpandImageAs Image

Dim holdExpandPanelAs Panel

Dim holdExpandExtenderAs CollapsiblePanelExtender

holdExpandLabel =CType(e.Item.FindControl("lblNewsCategory"), Label)

holdExpandImage =CType(e.Item.FindControl("imgNewsCategory"), Image)

holdExpandPanel =CType(e.Item.FindControl("PanelNewsCategory"), Panel)

'Create CollapsiblePanelExtender object

holdExpandExtender =New CollapsiblePanelExtender()

'Set properties of CollapsiblePanelExtender

holdExpandExtender.ID ="cpe" & holdExpandPanel.ID

holdExpandExtender.TargetControlID = holdExpandPanel.ID

holdExpandExtender.CollapseControlID = holdExpandImage.ID

holdExpandExtender.ExpandControlID = holdExpandImage.ID

holdExpandExtender.ImageControlID = holdExpandImage.ID

holdExpandExtender.CollapsedImage ="../Images/Icons/Expand.jpg"

holdExpandExtender.ExpandedImage ="../Images/Icons/Collapse.jpg"

holdExpandExtender.Collapsed =True

'Add CollapsiblePanelExtender

e.Item.Controls.Add(holdExpandExtender)

But still nothing. Please can anyone help, ive run out of ideas and im tempted to go back to ATLAS at this point!

Please see the "Known Issue" post at the top of this forum. It addresses this issue.

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

DropDownExtender: reusing DropDownControl - is it possible?

Hello Developers,

I have a form with several input textboxes and associated drop down extenders.
Is there any way I can use one drop down control (panel with link buttons) for all of my drop down extenders?
I just hate to render drop down control multiple times when each drop down should have exactly the same selection items.

Thanks for any pointers.

Tomasz

Hi Tomasz,

My understanding of your issue is that you want to use one DropDownExtender instead of several DropDownExtenders in your situation. If I have misunderstood, please feel free to let me know.

tdjastrzebski:

Is there any way I can use one drop down control (panel with link buttons) for all of my drop down extenders?

Do you want to set its TargetControl manually? I think it is a little complex unless we modify its source code. However I found a way . We only put one DropDownExtender on the page. When click (or a mouse event) the Control, DropDownExtender will conver it and act like one another DropDownExtender works on it. Here is the sample.

<%@. Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:LinkButton ID="LinkButton1" runat="server" style="display:none">LinkButton</asp:LinkButton>
<br />
<br />

<asp:Panel ID="Panel1" runat="server" style="display:none">
123123123<br>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Panel>
<ajaxToolkit:DropDownExtender ID="DropDownExtender1" BehaviorID="myDDEBID" runat="server" TargetControlID="LinkButton1" DropDownControlID="Panel1">
</ajaxToolkit:DropDownExtender>

<asp:LinkButton ID="LinkButton2" runat="server" OnClientClick="return false;" onmouseover="showDDE('LinkButton2','LinkButton2');">LinkButton2</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" OnClientClick="return false;" onmouseover="showDDE('LinkButton3','LinkButton3');">LinkButton3</asp:LinkButton>
<%=DateTime.Now.ToString()%>
<script type="text/javascript" language="javascript">
function showDDE(lbName,lbText){
//If you want to change the Panel's content when switch from different LinkButtons , the easiest way is to add an UpdatePanel inside the Panel.
//When onhover event is fire, first refresh the UpdatePanel by sending an asynchronous postback.
var newLocation = $common.getLocation($get(lbName));
$get("LinkButton1").innerText = lbText; //if Firefox , $get("LinkButton1").textContent = lbText;
$common.setLocation($find("myDDEBID").get_element(),new Sys.UI.Point(newLocation.x ,newLocation.y));
$get("LinkButton1").style.display='';
$find("myDDEBID").hide(); //enhance the compatible
$find("myDDEBID").hover();
}
</script>
</form>
</body>
</html>
I hope this help.

Best regards,

Jonathan

Thanks!

This solution seems to work.

Tomasz