Introduction :
To collapse or expand a panel we can use this control. The target control will be collapsed when CollapseControlId control is clicked and expanded when ExpandControlid is clicked. We can also write message to a textbox or label when target control is collapsed or expanded using CollapsedText / ExpandedText .
Three main attributes of this control , for which we need to assign values are
TargetControlID : Target Control which needs to be collapsed and expanded.
CollapSeControlID : Control on whose click target control is collapsed.
ExapndControlID: Control on whose click target control is expanded.
Example using CollapsiblePanelExtender :
Step 1 : Register AjaxControlToolKit.
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>Step 2 : Add ToolKitScriptManager to the page.
<ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
Step 3 : Add a panel and add two buttons to the page, one for collapsing the panel and other for expanding the panel.
Step 4 : Add CollapsiblePanelExtender and assign panel ID to the “TargetControlID” . Assign One button Id to “CollapseControlID” and other button Id to “ExpandControlID”
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CollapsiblePanelExtender</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<asp:Button ID="btnCollapse" runat="server" Text="Click to Collapse" />
<asp:Button ID="btnExpand" runat="server" Text="Click to Expand" />
<br />
<asp:Panel ID="panel1" runat="server" Height="115px" BorderWidth="1" Width="265px" >
<asp:Label id="lblText" runat="server" Text="Collapsible panel Example
To collapse or expand a panel we can use this control. The target control will be
collapsed when CollapseControlId control is clicked and expanded
when ExpandControlid is clicked.We can also write message to a
textbox or label when target controlis collapsed or expanded
using CollapsedText / ExpandedText ."
ForeColor="Maroon">
</asp:Label>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="Panel1" CollapseControlID="btnCollapse" ExpandControlID="btnExpand"
ExpandedSize="100" CollapsedSize="10" SuppressPostBack="true" >
</ajaxToolkit:CollapsiblePanelExtender>
</div>
</form>
</body>
</html>
Output :
No comments:
Post a Comment