Extender not collapsing when button clicked - code posted. Using Fridays build 11/10

When I click on the button - the extender should collapse. It collapses when I click on the header of pnlHeader. But not when I click on the button.
This code worked in beta 1. If I get rid of the updatepanel it works.

<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<atlas:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" RenderMode="inline">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="pnlAddAccounts"
ExpandControlID="pnlHeader" CollapseControlID="pnlHeader" Collapsed="False" ImageControlID="Image2"
SuppressPostBack="true">
</ajaxToolkit:CollapsiblePanelExtender>
<asp:Panel ID="pnlHeader" runat="server" Visible=true style="cursor: pointer;" CssClass="collapsePanelHeader">
<table border=0 cellpadding=3 cellspacing=0 width="100%" height="20px">
<tr><td align=center valign=middle width="97%">Additional Accounts</td>
</tr></table>
</asp:Panel>

<asp:Panel ID="pnlAddAccounts" runat="server" Visible="true" style="overflow:hidden;">
asdfaslkdjflajsfdlj
</asp:Panel>
</ContentTemplate>
</atlas:UpdatePanel>
</div
</form>

protected void Button1_Click(object sender, EventArgs e)
{
cpe.Collapsed = true;
cpe.ClientState = "true";
}

I've just createdwork item 5688, "Switch to ScriptManager.RegisterHiddenField for ClientState backing store", to track this problem. Here's the description from the work item:

The investigation ofhttp://forums.asp.net/thread/1462069.aspx led to the realization that an ASP.NET AJAX behavior change between Beta1 and Beta2 such that Extender controls now have their GetScriptDescriptors methods called during Render (instead of PreRender) can cause breaking changes for users who update ClientState during async postbacks. Specifically, the updated ClientState value won't necessarilly be included in the updated UpdatePanel content that's sent back to the browser. The fix for this is to use ScriptManager.RegisterHiddenField to create the relevant backing store. It's supposed to be fairly straightforward to do.

Sorry for the trouble, we'll get this fixed for our next release!

I don't have this property ScriptManager.RegisterHiddenField in my scriptmanager...

When the next release is supposed to go out?

Thanks

With luck, sometime soon-ish. :)

Events in Collapsiblepanel control

I'm using the Collapsiblepanel control for an article navigation system.

Here is the header element:

<asp:Panel ID="HeaderPanel1" EnableViewState="true" runat="server" Style="cursor: pointer;">
<li>
<asp:LinkButton ID="LinkButton1"
runat="server"
OnClick="LinkButton1_Click"
OnCommand="LinkButton1_Command">
HEADER LINK
</asp:LinkButton>
</li>
</asp:Panel>

Everything works fine in terms of panel collapsing and expanding, but I can't trigger events. This makes a kind of sense because the panel is probably already wired up with the toolkit code. BUT I need to be able to track if a panel is open or closed, so that I can recreate it later (When a user visits a main category page, expands a subcategory, and clicks an article in it, I need the panel in the same state it was in when we load up the page to view the article-perfect application for the collapsiblepanel, but no mechanism to persist state across PAGES).

The events I'm calling work just fine for any button controls outside of the collapsiblepanel. The code is fine; it's just no being called.

How can I add my own events within the header panel of the collapsiblepanel control? Do I need to create a collapsible panel from scratch in c# and then add events that way?

Hi,

If you plan to disable the extender from preventing an inner element to do postback, please set SuppressPostBack="false" on the CollapsiblePanelExtender. Otherwise, a postback will be intercepted.

Hope this helps.

Ray,

Is there a way I can collapse or expand the Collapsiblepanel through the code behind. And how can one read the current status of the panel in a program.

Kat

Hi Tedreagan,

My understanding of your issue is that LinkButton1_Click event is not catched by the server side. If I have misunderstood , please feel free to let me know.

Based on your description , I think your should check the CollapsiblePanelExtender's SuppressPostBack. It should be setted to "false" if you want send a postback when LinkButton1's click event is fired. Just like this:

<ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server" TargetControlID="Panel1"
ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="False" TextLabelID="Label1"
ImageControlID="Image1" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)"
ExpandedImage="../pic/collapse_blue.jpg" CollapsedImage="../pic/expand_blue.jpg"
SuppressPostBack="false" />

I have another sample which shows how to do some update work on the client side whenSuppressPostBack property is setted to "true"; May be you can benefit from it.

<%@. 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 id="Head1" runat="server"> <title>ClickEvent</title> <style type="text/css"> .collapsePanel { background-color:white; overflow:hidden; } .collapsePanelHeader{ width:100%; height:30px; background-image: url(../pic/bg-menu-main.png); background-repeat:repeat-x; color:#FFF; font-weight:bold; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server" Width="300"></asp:TextBox> <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px"> <div style="padding: 5px; cursor: pointer; vertical-align: middle;" onclick="getCollapsibleState()"> <div style="float: left;"> What is ASP.NET AJAX?</div> <div style="float: left; margin-left: 20px;"> <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label> </div> <div style="float: right; vertical-align: middle;"> <asp:ImageButton ID="Image1" runat="server" ImageUrl="../pic/expand_blue.jpg" AlternateText="(Show Details...)" /> </div> </div> </asp:Panel> <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate><%=DateTime.Now.ToString()%> <div style="display: none"> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel> </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server" TargetControlID="Panel1" ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="False" TextLabelID="Label1" ImageControlID="Image1" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)" ExpandedImage="../pic/collapse_blue.jpg" CollapsedImage="../pic/expand_blue.jpg" SuppressPostBack="true" /> <script type="text/javascript" language="javascript"> var objExtender; // this will run automatically when the page has finished loading function pageLoad(sender, args) { objExtender = $find("<%=cpeDemo.ClientID%>"); objExtender.add_expandComplete(getCollapsibleState); objExtender.add_collapseComplete(getCollapsibleState); } function getCollapsibleState() { if(objExtender.get_Collapsed()) { $get("<%=TextBox1.ClientID%>").value="Now it is getting collapsed!"; } else { $get("<%=TextBox1.ClientID%>").value="Now it is getting expanded!"; //force the UpdatePanel to update $get("<%=Button1.ClientID%>").click(); } } </script> </form></body></html>

I hope this help.

Best regards,

Jonathan

Kat,

I've looked through the method that CollapsiblePanelExtender exposes, and it seems that it doesn't support this behavior on server side directly. You may use javascript to expand it. You also can get its state asJonathan 's sample shows.

To expand it, please use this script and register it as start up client script:

objExtender = $find("<%=cpeDemo.ClientID%>").expandPanel();

Thanks very much. This was the right solution for me.

Jonathan, your code sample was remarkably helpful. Thanks.

Raymond Wen - MSFT:

Hi,

If you plan to disable the extender from preventing an inner element to do postback, please set SuppressPostBack="false" on the CollapsiblePanelExtender. Otherwise, a postback will be intercepted.

Hope this helps.