Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Aug 24, 2011 02:09 AM by BU XI - MSFT
Member
58 Points
51 Posts
Aug 21, 2011 07:34 PM|LINK
Hi ,
Am using CollapsiblePanelExtender as shown in below code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server"> </asp:ScriptManager> <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="ContentPanel" ExpandControlID="TitlePanel" CollapseControlID="TitlePanel" Collapsed="True" TextLabelID="Label1" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)" ImageControlID="Image1" ExpandedImage="~/images/collapse_blue.jpg" CollapsedImage="~/images/expand_blue.jpg" SuppressPostBack="true" ExpandDirection ="Vertical" ScrollContents="true" > </ajaxToolkit:CollapsiblePanelExtender> <asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader"> <asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg"/> Giri ? <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label> </asp:Panel> <asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel"> </asp:Panel>
</form> </body> </html>
Stylesheet :
.collapsePanel { width: 640px; height:0px; background-color:white; overflow:hidden; }
.collapsePanelHeader{ width:640px; height:20px; color: Yellow; background-color: Black; font-weight:bold; float:left; padding:5px; cursor: pointer; vertical-align: middle; }
Please suggest how to make this to work as vertical expander.
Thank you
Giri
All-Star
65719 Points
11133 Posts
Aug 22, 2011 03:32 AM|LINK
Hi,
Can you post a snapshot to explain your issue?
Vertical is the default setting of ExpandDirection. When I click the header I provided, it will expend vertically as usual.
Is the panel not expended when you click it so you can't see the control inside? Did you encounter any client error?
Aug 22, 2011 08:32 PM|LINK
above code working fine.
But i want that panel to collapse from right to left instead of bottom to top or top to bottom.
I want to use as a splitter .
22367 Points
2704 Posts
Microsoft
Aug 24, 2011 02:09 AM|LINK
Hello
CollapsiblePanel does not work in that way. If you don't mind using jQuery, you may look at this tutorial, http://www.ilovecolors.com.ar/jquery-collapsible-panel/
Demo, http://www.ilovecolors.com.ar/wp-content/uploads/collapsible/#
Basically, it uses jQuery's toggle method, http://api.jquery.com/toggle/
girishchanna...
Member
58 Points
51 Posts
Vertical Collapsible Panel Extender
Aug 21, 2011 07:34 PM|LINK
Hi ,
Am using CollapsiblePanelExtender as shown in below code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server">
</asp:ScriptManager>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
TargetControlID="ContentPanel"
ExpandControlID="TitlePanel"
CollapseControlID="TitlePanel"
Collapsed="True"
TextLabelID="Label1"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="Image1"
ExpandedImage="~/images/collapse_blue.jpg"
CollapsedImage="~/images/expand_blue.jpg"
SuppressPostBack="true"
ExpandDirection ="Vertical"
ScrollContents="true" >
</ajaxToolkit:CollapsiblePanelExtender>
<asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg"/>
Giri ?
<asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
</asp:Panel>
<asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">
</asp:Panel>
</form>
</body>
</html>
Stylesheet :
.collapsePanel {
width: 640px;
height:0px;
background-color:white;
overflow:hidden;
}
.collapsePanelHeader{
width:640px;
height:20px;
color: Yellow;
background-color: Black;
font-weight:bold;
float:left;
padding:5px;
cursor: pointer;
vertical-align: middle;
}
Please suggest how to make this to work as vertical expander.
Thank you
Giri
chetan.sarod...
All-Star
65719 Points
11133 Posts
Re: Vertical Collapsible Panel Extender
Aug 22, 2011 03:32 AM|LINK
Hi,
Can you post a snapshot to explain your issue?
Vertical is the default setting of ExpandDirection. When I click the header I provided, it will expend vertically as usual.
Is the panel not expended when you click it so you can't see the control inside? Did you encounter any client error?
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.
girishchanna...
Member
58 Points
51 Posts
Re: Vertical Collapsible Panel Extender
Aug 22, 2011 08:32 PM|LINK
Hi ,
above code working fine.
But i want that panel to collapse from right to left instead of bottom to top or top to bottom.
I want to use as a splitter .
Thank you
Giri
BU XI - MSFT
All-Star
22367 Points
2704 Posts
Microsoft
Re: Vertical Collapsible Panel Extender
Aug 24, 2011 02:09 AM|LINK
Hello
CollapsiblePanel does not work in that way. If you don't mind using jQuery, you may look at this tutorial, http://www.ilovecolors.com.ar/jquery-collapsible-panel/
Demo, http://www.ilovecolors.com.ar/wp-content/uploads/collapsible/#
Basically, it uses jQuery's toggle method, http://api.jquery.com/toggle/
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework