CollapsiblePanelExtender in asp.net ajax
CollapsiblePanelExtender is an asp.net ajax control toolkit's extender control. CollapsiblePanelExtender allow
us to create a collapsible section in asp.net web page. CollapsiblePanelExtender targets any Panel server control.
the panel is postback aware. on a client postback it can automatically restores its client states.
CollapsiblePanelExtender control have the following properties those are, TargetControlID, CollapsedSize, ExpandedSize,
Collapsed, AutoCollapse, AutoExpand, ScrollContents, ExpandControlID, CollapseControlID, TextLabelID, CollapsedText, ExpandedText,
ImageControlID, CollapsedImage, ExpandedImage and ExpandDirection.
CollapsiblePanelExtender control's TargetControlID property specify the Panel which we want to expand and collapse.
ExpandControlID specify the control that will expand target panel on a click. and CollapseControlID specify the control
that will collapse target panel on a click. if ExpandControlID and CollapseControlID is same control's ID then the control
will automatically toggle its state on each click.
CollapsedSize property specify the target panel's collapsed state size and ExpandedSize property set the target panel's
expand state size.
Collapsed property specify the target panel should initially be collapsed or expanded. AutoCollapse property allow us to automatically
collapse target panel when the mouse is moved off. and AutoExpand property allow us to automatically expand panel when mouse is
moved over. ScrollContents property allow us to add a scrollbar if the content is longer than panel itself.
TextLabelID property specify a Label control where the Status Text for the Panel will be placed. CollapsedText property show
a message on specified Label when Panel is collapsed and ExpandedText property show a message when the Panel is opened.
ImageControlID, ExpandedImage and CollapsedImage property allow us to set image icon to indicate Panel expand and collapse state.
ExpandDirection property have two possible values those are Vertical and Horizontal. Vertical value specify Panel will expands from top to bottom and
Horizontal value specify Panel will expands from left to right direction.
UsingCollapsiblePanelExtender.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>How to use CollapsiblePanelExtender in asp.net ajax</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:DeepPink; font-style:italic;">Ajax Control Toolkit Example: Using CollapsiblePanelExtender</h2>
<hr width="600" align="left" color="Pink" />
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
>
</asp:ScriptManager>
<cc1:CollapsiblePanelExtender
ID="CollapsiblePanelExtender1"
runat="server"
TargetControlID="Panel2"
ExpandControlID="Panel1"
CollapseControlID="Panel1"
TextLabelID="Label1"
ExpandedText="-"
CollapsedText="+"
>
</cc1:CollapsiblePanelExtender>
<asp:Label
ID="Label1"
runat="server"
ForeColor="Crimson"
Font-Italic="true"
Font-Names="Comic Sans MS"
Font-Size="XX-Large"
>
</asp:Label>
<asp:Panel
ID="Panel1"
runat="server"
Width="500"
>
<asp:Image
ID="Image1"
runat="server"
ImageUrl="~/Images/SeaBeach.jpg"
Height="150"
BorderWidth="1"
BorderColor="DarkSeaGreen"
/>
</asp:Panel>
<asp:Panel
ID="Panel2"
runat="server"
Width="500"
>
<asp:Image
ID="Image2"
runat="server"
ImageUrl="~/Images/SeaBeach.jpg"
BorderColor="DarkBlue"
BorderWidth="2"
/>
</asp:Panel>
</div>
</form>
</body>
</html>
