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