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.
No comments:
Post a Comment