Home / AJAX

HOW TO Use the CollapsiblePanel Control

RSS
Modified on 2010/01/18 05:45 by Mike Pope Categorized as Uncategorized

CollapsiblePanel Demonstration

filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler


CollapsiblePanel Description

The CollapsiblePanel extender adds collapsible sections to a Web page. This extender targets any ASP.NET Panel control. You specify which control or controls on the page should act as the open and close controllers for the panel. Alternatively the panel can be set to automatically expand and collapse when the mouse cursor moves in or out of it.

The panel is postback aware. During a client postback, the panel remembers and restores its client state. (This demonstrates the ability of extenders to communicate between client and server code.)

You can specify whether the panel should scroll when the content is larger than the panel, and whether the panel expands horizontally or vertically (height or width).

Note: The CollapsiblePanel extender assumes that the standard CSS box model is being used. Early versions of Internet Explorer did not support that model completely. Therefore, use the !DOCTYPE declaration (as found at the top of this page and as enabled by default for new ASP.NET pages) to specify that the page should be rendered using Internet Explorer standards-compliant mode.

Video - How Do I: Use the ASP.NET AJAX Collapsable Panel Extender?

CollapsiblePanel Client Code Sample

<!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>Untitled Page</title> <style type="text/css"> </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.debug = true; Sys.require(Sys.components.collapsiblePanel, function() { $("#panel").collapsiblePanel({ ExpandControlID: "expand", CollapseControlID: "expand" }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div id="expand"><a href="#">Expand/Collapse</a></div> <div id="panel"> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> </div> </div> </form> </body> </html>

CollapsiblePanel Client Reference

Sys.Extended.UI.CollapsiblePanelBehavior Class

  • Summary - Adds collapsible sections to a page.
  • Parameters - Sys.UI.DomElement element

Events

  • collapsing(handler) - Adds or removes an event handler for the collapsing event.
    • Parameters - A function representing the event handler.
  • collapsed(handler) - Adds or removes an event handler for the collapsed event.
    • Parameters - A function representing the event handler.
  • collapseComplete(handler) - Adds or removes an event handler for the collapseComplete event.
    • Parameters - A function representing the event handler.
  • expanding(handler) - Adds or removes an event handler for the expanding event.
    • Parameters - A function representing the event handler.
  • expanded(handler) - Adds or removes an event handler for the expanded event.
    • Parameters - A function representing the event handler.
  • expandComplete(handler) - Adds or removes an event handler for the expandComplete event.
    • Parameters - A function representing the event handler.

Methods

  • initialize() - Initializes the CollapsiblePanel behavior.
  • dipose() - Disposes the CollapsiblePanel behavior.
  • togglePanel(eventObj) - The event handler to expand or collapse the panel based on its current state.
    • Parameters - (Optional) Sys.UI.DomEvent eventObj.
    • Remarks - This is the public function that should be called (instead of _toggle) when you need to programmatically open and close the collapsible panel.
  • expandPanel(eventObj) - Expands the panel.
    • Parameters - (Optional) Sys.UI.DomEvent eventObj.
  • collapsePanel(eventObj) - Collapses the panel.
    • Parameters - (Optional) Sys.UI.DomEvent eventObj.
  • raiseCollapsing(Sys.CancelEventArgs) - Raises the collapsing event.
    • Parameters - A Sys.CancelEventArgs object that represents event arguments for the collapsing event.
  • raiseCollapsed(Sys.EventArgs) - Raises the collapsed event.
    • Parameters - A Sys.EventArgs object that represents event arguments for the collapsed event.
  • raiseCollapseComplete(Sys.EventArgs) - Raises the collapseComplete event.
    • Remarks - OBSOLETE - Use the collapsed event instead.
  • raiseExpanding(Sys.CancelEventArgs) - Raises the expanding event.
    • Parameters - A Sys.CancelEventArgs object that represents event arguments for the expanding event.
  • raiseExpandComplete() - Raises the expandComplete event.
    • Remarks - OBSOLETE - Use the expanded event instead.

Properties

  • TargetHeight - Gets or sets the height, in pixels, of the panel.
  • TargetWidth - Gets or sets the width, in pixels, of the panel.
  • Collapsed - Gets or sets a Boolean value that specifies whether the panel is collapsed.
  • CollapsedSize - Gets or sets the size of the target, in pixels, when it is in the collapsed state.
  • ExpandedSize - Gets or sets an integer that specifies the size of the target, in pixels, when it is in the expanded state.
  • CollapseControlID - Gets or sets a string that contains the ID of the control that is used to collapse the target when clicked.
  • ExpandControlID - Gets or sets a string that contains the ID of the control used to expand the target when clicked.
  • ScrollContents - Gets or sets a Boolean value that specifies whether to add a scrollbar when the contents are larger than the target.
    • Remarks - The contents of the CollapsiblePanel object will be clipped if no scrollbar is and if the contents are larger than the target. In that case, the ScrollContents property will be false.
  • SuppressPostBack - Gets or sets a Boolean value that specifies whether to suppress postbacks that are generated when the elements that are represented by CollapseControlID or ExpandControlID are clicked.
  • TextLabelID - Gets or sets a string that contains the ID of the element where the status text for the target will be placed.
  • ExpandedText - Gets or sets the text to show in the element specified by TextLabelID when the target is expanded.
    • Remarks - The ExpandedText property is also used as the alternate text of the image if ImageControlID has been set.
  • CollapsedText - Gets or sets the text to show in the element that is specified by TextLabelID when the target is collapsed.
    • Remarks - The CollapsedText property is also used as the alternate text of the image if ImageControlID has been set.
  • ImageControlID - Gets or sets a string that contains the ID of the img element where an icon indicating the collapsed status of the target will be placed.
  • ExpandedImage - Gets or sets the path of an image to show in the element specified by ImageControlID when the target is expanded.
  • CollapsedImage - Gets or sets the path of an image to show in the element specified by ImageControlID when the target is collapsed.
  • AutoExpand - Gets or sets a Boolean value that specifies whether to automatically expand the target when the mouse is moved into it.
  • AutoCollapse - Gets or sets a Boolean value that specifies whether to automatically collapse the target when the mouse is moved out of it.
  • ExpandDirection - Gets or sets a Sys.Extended.UI.CollapsiblePanelExpandDirection object that contains the direction that the panel will expand and collapse (Vertical or Horizontal).

Sys.Extended.UI.CollapsiblePanelExpandDirection Enum

  • Summary - Describes whether the panel is opened vertically or horizontally.

Fields

  • Horizontal - Specifies that a CollapsiblePanel control is opened horizontally.
  • Vertical - Specifies that a CollapsiblePanel control is opened vertically.

CollapsiblePanel Server Code Sample

        <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px"> 
            <div style="padding:5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">What is ASP.NET AJAX?</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
                </div>
                <div style="float: right; vertical-align: middle;">
                    <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg" AlternateText="(Show Details...)"/>
                </div>
            </div>
        </asp:Panel>
        <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0">
            <br />
            <p>
                <asp:ImageButton ID="Image2" runat="server" ImageUrl="~/images/AJAX.gif"
                    AlternateText="ASP.NET AJAX" ImageAlign="right" />
                <%= GetContentFillerText() %>
            </p>
        </asp:Panel>
    </div>

<ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server" TargetControlID="Panel1" ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="True" TextLabelID="Label1" ImageControlID="Image1" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)" ExpandedImage="~/images/collapse_blue.jpg" CollapsedImage="~/images/expand_blue.jpg" SuppressPostBack="true" SkinID="CollapsiblePanelDemo" />

CollapsiblePanel Server Reference

The properties in italics are optional.

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
    TargetControlID="Panel1"
    CollapsedSize="0"
    ExpandedSize="300"
    Collapsed="True"
    ExpandControlID="LinkButton1"
    CollapseControlID="LinkButton1"
    AutoCollapse="False"
    AutoExpand="False"
    ScrollContents="True"
    TextLabelID="Label1"
    CollapsedText="Show Details..."
    ExpandedText="Hide Details" 
    ImageControlID="Image1"
    ExpandedImage="~/images/collapse.jpg"
    CollapsedImage="~/images/expand.jpg"
    ExpandDirection="Vertical" />
  • TargetControlID - The ID of the control to 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 - True to specify that the object should initially be collapsed or expanded. Set this to match your initial size. In that case, the panel is initially set to a height of 0 to match the CollapsedSize property, so that when the page first renders, the panel is not displayed in expanded state.
  • AutoCollapse - True to automatically collapse the panel when the mouse is moved out of the panel.
  • AutoExpand - True to automatically expand when the mouse is moved into the panel.
  • ScrollContents - True to add a scrollbar if the contents are larger than the panel, or False to clip the contents.
  • ExpandControlID - The ID of the control that can be clicked to expand the panel. If the value of this property is the same as CollapseControlID, the panel will automatically toggle its state on each click.
  • CollapseControlID - The ID of the control that can be clicked to collapse the panel. If the value of this property is the same as ExpandControlID, 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 inner HTML of the specified control.
  • CollapsedText - The text to display in the control that is 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 display in the control that is 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 that indicates the collapsed status of the panel will be placed. The extender sets the Source property of the Image control to the URLs of the CollapsedImage and ExpandedImage properties. If the ExpandedText or CollapsedText properties are set, they are used as the alternate text for the image.
  • CollapsedImage - The path of an image used by ImageControlID when the panel is collapsed.
  • ExpandedImage - The path of an image used by ImageControlID when the panel is expanded.
  • ExpandDirection - The direction to expand the panel. This can be Vertical or Horizontal.



CollapsiblePanel Additional Code Samples