Introduction:
Here I will explain how to use the Ajax Collapsible Panel in asp.net.
Here I will explain how to use the Ajax Collapsible Panel in asp.net.
Description:
In Previous post I explained clearly how to use Ajax Accordion menu .Now I will explain how to use the Ajax Collapsible panel control in asp.net. In so many websites we will see some of collapsible panels like if we click on down arrow panel will expand automatically and if we click on up arrow that panel will collapse automatically this type of functionality we can achieve by using ajax collapsible panel control.
Now we can see how to use ajax collapsible control in our application for that first add AjaxControlToolkit reference to your application and add
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
To your aspx page and design your page likes this
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Collapsible Panel Example</title>
<style type="text/css">
.pnlCSS{
font-weight: bold;
cursor: pointer;
border: solid 1px #c0c0c0;
width:30%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<div>
<asp:Panel ID="pnlClick" runat="server" CssClass="pnlCSS">
<div style="background-image:url('green_bg.gif'); height:30px; vertical-align:middle">
<div style="float:left; color:White;padding:5px 5px 0 0">
Collapsible Panel
</div>
<div style="float:right; color:White; padding:5px 5px 0 0">
<asp:Label ID="lblMessage" runat="server" Text="Label"/>
<asp:Image ID="imgArrows" runat="server" />
</div>
<div style="clear:both"></div>
</div>
</asp:Panel>
<asp:Panel ID="pnlCollapsable" runat="server" Height="0" CssClass="pnlCSS">
<table align="center" width="100%">
<tr>
<td></td>
<td>
<b>Registration Form</b>
</td>
</tr>
<tr>
<td align="right" >
UserName:
</td>
<td>
<asp:TextBox ID="txtuser" runat="server"/>
</td>
</tr>
<tr>
<td align="right" >
Password:
</td>
<td>
<asp:TextBox ID="txtpwd" runat="server"/>
</td>
</tr>
<tr>
<td align="right">
FirstName:
</td>
<td>
<asp:TextBox ID="txtfname" runat="server"/>
</td>
</tr>
<tr>
<td align="right">
LastName:
</td>
<td>
<asp:TextBox ID="txtlname" runat="server"/>
</td>
</tr>
<tr>
<td align="right">
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"/>
</td>
</tr>
<tr>
<td align="right" >
Phone No:
</td>
<td>
<asp:TextBox ID="txtphone" runat="server"/>
</td>
</tr>
<tr>
<td align="right" >
Location:
</td>
<td align="left">
<asp:TextBox ID="txtlocation" runat="server"/>
</td>
</tr>
<tr>
<td></td>
<td align="left" >
<asp:Button ID="btnsubmit" runat="server" Text="Save"/>
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</asp:Panel>
<ajax:CollapsiblePanelExtender
ID="CollapsiblePanelExtender1"
runat="server"
CollapseControlID="pnlClick"
Collapsed="true"
ExpandControlID="pnlClick"
TextLabelID="lblMessage"
CollapsedText="Show"
ExpandedText="Hide"
ImageControlID="imgArrows"
CollapsedImage="downarrow.jpg"
ExpandedImage="uparrow.jpg"
ExpandDirection="Vertical"
TargetControlID="pnlCollapsable"
ScrollContents="false">
</ajax:CollapsiblePanelExtender>
</div>
</form>
</body>
</html>
| |
If we observe above code we declared so many properties for Ajax Collapsible control and I used two panels one panel is used to perform open/close function and another panel is used perform open/close behavior now I will explain all the collapsoblepanelextender properties
TargetControlID – The panel to operate expand and collpse .
CollapseControlID/ExpandControlID – These properties is used to set the collapse/expand panels based on panel click
Collapsed – This property is used to set the panel collapsed/expanded initially by default.
TextLableID – This property is used to set the ID of the label which will display the status message based on panel position.
CollapsedText – This property is used to set the text to show in the control specified by TextLabelID when the panel is collapsed.
ExpandedText – This property is used to set the text to show in the control specified by TextLabelID when the panel is expanded.
ImageControlID – This property is used to set the ID of an Image control where an icon indicating the collapsed status of the panel will be placed.
CollapsedImage/ExpandedImage – This property is used to display the images based on status of panel.
ExpandDirection – This Property is used to set the direction of panel to expand either “vertical” or “horizontal”
ScrollContents – True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents
Demo
 |
Download sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
14 comments :
very helpful post
really thanks.
suresh you are awesome yar ,and you to continue to socialwork
Sir, I am not able to run this as your demo is showing. I have pasted and referred AjaxControlToolkit.dll file. Also I am not able to use the rest ajax tools!
How to use Collapsible panel in Grid view in C# asp .net
My Email ID:-Jakharji@rediffmail.com
Hi Can I have this with grid view sample please.. Like I will show EmpID and Name in initial gridview when i select EmpID i would like to show another gridview
Sir Keep Continue Posting..
Great Job You Are Doing..
May God Bless You...!!!
Hello. On the right side of this page is a sliding panel object with the FACEBOOK logo. Is that done with the ASP.Net Ajax Collapsible Panel Control? If not, how is that done? Thanks.
Sir i want code facebook logo placed in your website
Excellent. directly if would have been posted the aspx means many of us would have been missed to see your things. i mean the moving picture what you have displayed below know, it will tells the whole story with in a second and sets and sits us to try out the stuffs as how exactly you have done. Thanks a lot. I like you way of presentation. Excellent, this how it has to be where a person wants to lean the new stuffs. Very nice. Thanks a lot
that logo is done with ajax always visible control etender i guess...
sir i want to know the name of that tool "facebook collapsable" which is used in your website(this page)
sir i want to implement this tool in my website but i don't know the name so sir plz tell me the name
how to do this? i am taking 3 collapsible panels if i expand the first panel second and third will collapsed ,and if i expand second panel third and first will be collapsed,and third will also same ...every time only one panel expand ...
please help me send me the code to my mail
thanks and regards,
naveen
sir you are doing great job it's very helpful to fresher
Thank you soooo much!!!
Note: Only a member of this blog may post a comment.