Is there a way to expand/collapse a CollapsiblePanelExtender panel in server code? I have seen the post re: client side, but need to do it on the server during a postback.
Try using the Collapsed property of the CollapsiblePanelExtender server side.
/Klaus
Hi there!
You can set the extender's "Collapsed" property programmatically. This will collapse the panel (but without the fancy animation):
cpe1.Collapsed =true;
If you want your panel to slide in/out, you will have to trigger its behavior in JavaScript. You might register the script via Page.ClientScript.RegisterClientScriptBlock or Page.ClientScript.RegisterStartupScript to use it in code behind or call it onload/onunload. This example toggles a CollapsibePanelExtender using a JavaScript function:
1<%@. Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="Test.WebForm4" %>
2<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>34<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
56<html xmlns="http://www.w3.org/1999/xhtml" >
7<head runat="server">
8 <title>Untitled Page</title>
9 <script language="javascript" type="text/javascript">
10 /*
11Toggles a CollapsiblePanelExtender
12*/
13function Toggle(behaviorId, open) {
14// Find the behavior instance
15var behavior = $find(behaviorId);
16if (!behavior) return;
1718// Open or close the panel
19if (open){
20behavior._doOpen();
21}
22else{
23behavior._doClose();
24}
25}
26 </script>
27</head>
28<body>
29 <form id="form1" runat="server">
30 <div>
31<asp:ScriptManager ID="ScriptManager1" runat="server">
32</asp:ScriptManager>
33<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" BackColor="Aquamarine">
34PANEL
35</asp:Panel>
36<a href="#" onclick='javascript:Toggle("bhv1",true);'>Expand</a>
37<a href="#" onclick='javascript:Toggle("bhv1",false);'>Collapse</a>
38<ajax:collapsiblepanelextender runat="server"
39BehaviorID="bhv1" ID="cpe1"
40TargetControlID="Panel1"41Collapsed="false" />
42 </div>
43 </form>
44</body>
45</html>
HTH and best regards,
Thomas
No comments:
Post a Comment