Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Introduction:

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”

ScrollContentsTrue 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 RSS subscribe by email Subscribe by Email

13 comments :

Anonymous said...

very helpful post
really thanks.

Anonymous said...

suresh you are awesome yar ,and you to continue to socialwork

Anonymous said...

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!

Subhash Jakhar said...

How to use Collapsible panel in Grid view in C# asp .net
My Email ID:-Jakharji@rediffmail.com

Anonymous said...

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

Prateek Diwakar said...

Sir Keep Continue Posting..

Great Job You Are Doing..

May God Bless You...!!!

Anonymous said...

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.

Reshmi T P said...

Sir i want code facebook logo placed in your website

Rakesh D said...

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

Anonymous said...

that logo is done with ajax always visible control etender i guess...

Anonymous said...

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

naveen kumar said...

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

chaudhary Rohit said...

sir you are doing great job it's very helpful to fresher

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.