Ajax Collapsible Panel Extender Example In Asp.Net
In this tutorial i will teach you how to use Ajax Collapsible Panel Extender Example In Asp.Net projects.CollapsiblePanel is a very flexible extender that allows you to easily add collapsible sections to your web page.The panel is also post-back aware. On a client postback, it automatically remembers and restores its client state.
Collapsible Panel Properties:
- TargetControlID – the Panel to operate expand and collapse.
- CollapsedSize – The size of the target, in pixels, when it is in the collapsed state.
- ExpandedSize – The size of the target, in pixels, when it is in the opened state.
- Collapsed – Specifies that the object should initially be collapsed or expanded. Set this to match your initial size. In this case, we initially set the panel to a height of 0 to match the CollapsedSize property, so when the page first renders, we don’t see the panel expanded.
- AutoCollapse – True to automatically collapse when the mouse is moved off the panel.
- AutoExpand – True to automatically expand when the mouse is moved over the panel.
- ScrollContents – True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents.
- ExpandControlID/CollapseControlID – The controls that will expand or collapse the panel on a click, respectively. If these values are the same, the panel will automatically toggle its state on each click.
- TextLabelID – The ID of a label control where the “status text” for the panel will be placed. The panel will replace the internal HTML of this control (e.g. any HTML between the tags).
- CollapsedText – The text to show in the control specified by TextLabelID when the panel is collapsed. This text is also used as the alternate text of the image if ImageControlID is set.
- ExpandedText – The text to show in the control specified by TextLabelID when the panel is opened. This text is also used as the alternate text of the image if ImageControlID is set.
- ImageControlID – The ID of an Image control where an icon indicating the collapsed status of the panel will be placed. The extender will replace the source of this Image with the CollapsedImage and ExpandedImage urls as appropriate. If the ExpandedText or CollapsedText properties are set, they are used as the alternate text for the image.
- CollapsedImage – The path to an image used by ImageControlID when the panel is collapsed
- ExpandedImage – The path to an image used by ImageControlID when the panel is expanded
- ExpandDirection – can be “Vertical” or “Horizontal” to determine whether the panel expands top-to-bottom or left-to-right.
HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ajax Collapsible Panel Extender Example - Asp.net</title> <link href="Style.css" rel="stylesheet" /> </head> <body class="main"> <form id="form1" runat="server"> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager> <div style="width:980px"> <h2 class="h2"> Ajax Collapsible Panel Extender Example - Asp.net </h2> <div class="cheader"> <asp:Panel ID="pnl3" runat="server"> <asp:ImageButton ID="img2" CssClass="imgbtn" ImageUrl="~/images/plusicon.png" runat="server" /><h2>First Collapsible Panel </h2> </asp:Panel> </div> <div class="cdata"> <asp:Panel ID="pnl4" runat="server"> HighTechnology, launched in 2011, a blog run by team of professional having expertise in many technologies. We here covers the maximum technologies that ever had covered by any blog.Here you will learn how To solve computer related problems and always stay updated with latest technology news. <br /><br /> HighTechnology, launched in 2011, a blog run by team of professional having expertise in many technologies. We here covers the maximum technologies that ever had covered by any blog.Here you will learn how To solve computer related problems and always stay updated with latest technology news. </asp:Panel> </div> <div class="cheader"> <asp:Panel ID="Panel1" runat="server"> <asp:ImageButton ID="ImageButton1" CssClass="imgbtn" ImageUrl="~/images/plusicon.png" runat="server" /><h2>Second Collapsible Panel </h2> </asp:Panel> </div> <div class="cdata"> <asp:Panel ID="Panel2" runat="server"> HighTechnology, launched in 2011, a blog run by team of professional having expertise in many technologies. We here covers the maximum technologies that ever had covered by any blog.Here you will learn how To solve computer related problems and always stay updated with latest technology news. <br /><br /> HighTechnology, launched in 2011, a blog run by team of professional having expertise in many technologies. We here covers the maximum technologies that ever had covered by any blog.Here you will learn how To solve computer related problems and always stay updated with latest technology news. </asp:Panel> </div> <hr /> <div class="footer"> <p>© 2013 All rights reserved by HighTechnology.in <a href="http://hightechnology.in" target="_blank">HighTechnology.in</a> | Hosting Partner <a href="http://www.grootstech.com" target="_blank">Grootstech Solutions</a></p> </div> </div> <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" SuppressPostBack="true" ExpandedImage="~/images/minusicon.png" TargetControlID="pnl4" CollapseControlID="pnl3" ExpandControlID="pnl3" CollapsedImage="~/images/plusicon.png" Collapsed="true" ImageControlID="img2"> </asp:CollapsiblePanelExtender> <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" SuppressPostBack="true" ExpandedImage="~/images/minusicon.png" TargetControlID="Panel2" CollapseControlID="Panel1" ExpandControlID="Panel1" CollapsedImage="~/images/plusicon.png" Collapsed="true" ImageControlID="ImageButton1"> </asp:CollapsiblePanelExtender> </form> </body> </html>
CSS:
body
{
margin:0px auto;
padding-top:40px;
width:980px;
font-family:Candara;
}
.h2
{
text-align:center;
}
.cheader
{
background-color:#e6e6e6;
border:dashed 1px;
border-top:dashed 1px;
border-color:rgba(0,0,0,0.4);
}
.cheader h2
{
padding-left:40px;
padding-top:0px;
font-size:20px;
}
.imgbtn
{
position:absolute;
margin-top:-3px
}
.cdata
{
text-align:justify;
padding-top:10px;
padding-bottom:10px;
width:100%
}
.hr
{
padding-top:60px;
border-bottom:solid 2px rgba(0,0,0,0.4);
}
.footer
{
width:100%;
text-align:center;
padding-top:0px;
font-size:16px;
}
One reply on “Ajax Collapsible Panel Extender Example In Asp.Net”
Thanks a lot! It helped a bunch!