Ajax Control Toolkit CollapsiblePanel

Modified on 2010/04/15 21:37 by Stephen Walther — Categorized as: Uncategorized

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.

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" />

CollapsiblePanel Client Reference

Sys.Extended.UI.CollapsiblePanelBehavior Class


Events


Methods


Properties


Sys.Extended.UI.CollapsiblePanelExpandDirection Enum


Fields