CollapsiblePanel

CollapsiblePanelExtender (demo)

An extender class which adds collapse/expand behavior to an ASP.NET Panel control. The panel that is extended can then be collapsed or expanded by the user of the page, which is handy for doing things like showing or hiding content or maximizing available space.

Properties

Name	Description
AutoCollapse	If true, and the panel is in its 'expanded' state, the panel will automatically collapse when the mouse pointer moves off of the panel. The default is false
AutoExpand	If true, and the panel is in its 'collapsed' state, the panel will automatically expand when the mouse pointer moves into the panel. The default is false
CollapseControlID	The server ID of the control to initiate the collapse of the target panel. The panel will collapse when this control fires its client side "onclick" event Remarks: If this value is the same as the value for "ExpandControlID", the CollapsiblePanel will toggle when this control is clicked
Collapsed	Signals the initial collapsed state of the control. Note this will not cause an expanded control to collapse at initialization, but rather tells the extender what the initial state of the Panel control is. The default is false
CollapsedImage	Image to be displayed when the Panel is collapsed and the ImageControlID is set
CollapsedSize	The size of the panel when it is in it's collapsed state. To avoid flicker when your page initializes, set the initial height (or width) of your Panel control to match this value, and set the Collapsed property to 'true' Remarks: The default value is -1, which indicates that the CollapsiblePanel should initialize the CollapsedSize based on the initial size of the object
CollapsedText	The text to display in the collapsed state. When the panel is collapsed, the internal contents (anything between the start and ending tags) of the control referenced by the TextLabelID property will be replaced with this text. This collapsed text is also used as the alternate text of the image if ImageControlID is set
ExpandControlID	The server ID of the control to initiate the expansion of the target panel. The panel will opening when this control fires its client side "onclick" event Remarks: If this value is the same as the value for "CollapseControlID", the CollapsiblePanel will toggle when this control is clicked
ExpandDirection	The dimension to use for collapsing and expanding - vertical or horizontal
ExpandedImage	Image to be displayed when the Panel is expanded and the ImageControlID is set
ExpandedSize	The size of the panel when it is in it's opened state. To avoid flicker when your page initializes, set the initial width of your Panel control to match this value, and set the Collapsed property to 'false' Remarks: The default value is -1, which indicates that the CollapsiblePanel should initialize the ExpandedSize based on the parent div offsetheight if aligned vertically and parentdiv offsetwidth if aligned horizonatally
ExpandedText	The text to display in the expanded state. When the panel is expanded, the internal contents (anything between the start and ending tags) of the control referenced by the TextLabelID property will be replaced with this text. This expanded text is also used as the alternate text of the image if ImageControlID is set
ImageControlID	The ID of an image control to display the current state of the Panel. When the collapsed state of the panel changes, the image source will be changed from the ExpandedImage to the CollapsedImage. We also use the ExpandedText and CollapsedText as the image's alternate text if they are provided
ScrollContents	Determines whether the contents of the panel should be scrolled or clipped if they do not fit into the expanded size. The default is false
SuppressPostBack	Determines whether the CollapsiblePanelBehavior should suppress the click operations of the controls referenced in CollapseControlID and/or ExpandControlID. Remarks: By default, this value is false, except for anchor ("A") tags
TextLabelID	The ID of a label control to display the current state of the Panel. When the collapsed state of the panel changes, the entire HTML contents (anything between the start and ending tags of the label) will be replaced with the status text

Client properties

Name	Description
autoCollapse	Whether to automatically collapse the target when the mouse is moved off of it
autoExpand	Whether to automatically expand the target when the mouse is moved over it
collapseControlID	ID of the control used to collapse the target when clicked
collapsed	Whether or not the panel is collapsed
collapsedImage	Path to an image to show in the element specified by ImageControlID when the target is collapsed
collapsedSize	The size of the target, in pixels, when it is in the collapsed state
collapsedText	Text to show in the element specified by TextLabelID when the target is collapsed. This text is also used as the alternate text of the image if ImageControlID has been provided
expandControlID	ID of the control used to expand the target when clicked
expandDirection	Direction the panel will expand and collapse (can be either "Vertical" or "Horizontal")
expandedImage	Path to an image to show in the element specified by ImageControlID when the target is expanded
expandedSize	The size of the target, in pixels, when it is in the expanded state
expandedText	Text to show in the element specified by TextLabelID when the target is expanded. This text is also used as the alternate text of the image if ImageControlID has been provided
imageControlID	ID of the element where an icon indicating the collapsed status of the target will be placed
scrollContents	Whether to add a scrollbar when the contents are larger than the target (the contents will be clipped if false)
suppressPostBack	Whether or not to suppress postbacks generated when the CollapseControlID or ExpandControlID elements are clicked
targetHeight	Wrap the height of the panel
targetWidth	Wrap the width of the panel
textLabelID	ID of the element where the "status text" for the target will be placed

Client methods

Name	Description
collapsePanel(eventObj)	Collapse the panel. Public function that users should call if they wish to operate the collapsible panel programmatically
expandPanel(eventObj)	Open the panel. Public function that users should call if they wish to operate the collapsible panel programmatically
togglePanel(eventObj)	Event handler to expand or collapse the panel (based on its current state) This is the public function that should be called instead of _toggle if you wish to programmatically open and close the collapsible panel

Client events

Name	Description
collapseComplete	Fires when collapse completes
collapsed	Fires when control is collapsed
collapsing	Fires when control is collapsing
expandComplete	Fires when expand completes
expanded	Fires when control is expanded
expanding	Fires when control is expanding

Client properties

targetHeight

Wrap the height of the panel

Getter name: get_targetHeight()
Setter name: set_targetHeight(value)

targetWidth

Wrap the width of the panel

Getter name: get_targetWidth()
Setter name: set_targetWidth(value)

collapsed

Whether or not the panel is collapsed

Getter name: get_collapsed()
Setter name: set_collapsed(value)

collapsedSize

The size of the target, in pixels, when it is in the collapsed state

Getter name: get_collapsedSize()
Setter name: set_collapsedSize(value)

expandedSize

The size of the target, in pixels, when it is in the expanded state

Getter name: get_expandedSize()
Setter name: set_expandedSize(value)

collapseControlID

ID of the control used to collapse the target when clicked

Getter name: get_collapseControlID()
Setter name: set_collapseControlID(value)

expandControlID

ID of the control used to expand the target when clicked

Getter name: get_expandControlID()
Setter name: set_expandControlID(value)

scrollContents

Whether to add a scrollbar when the contents are larger than the target (the contents will be clipped if false)

Getter name: get_scrollContents()
Setter name: set_scrollContents(value)

suppressPostBack

Whether or not to suppress postbacks generated when the CollapseControlID or ExpandControlID elements are clicked

Getter name: get_suppressPostBack()
Setter name: set_suppressPostBack(value)

textLabelID

ID of the element where the "status text" for the target will be placed

Getter name: get_textLabelID()
Setter name: set_textLabelID(value)

expandedText

Text to show in the element specified by TextLabelID when the target is expanded. This text is also used as the alternate text of the image if ImageControlID has been provided

Getter name: get_expandedText()
Setter name: set_expandedText(value)

collapsedText

Text to show in the element specified by TextLabelID when the target is collapsed. This text is also used as the alternate text of the image if ImageControlID has been provided

Getter name: get_collapsedText()
Setter name: set_collapsedText(value)

imageControlID

ID of the element where an icon indicating the collapsed status of the target will be placed

Getter name: get_imageControlID()
Setter name: set_imageControlID(value)

expandedImage

Path to an image to show in the element specified by ImageControlID when the target is expanded

Getter name: get_expandedImage()
Setter name: set_expandedImage(value)

collapsedImage

Path to an image to show in the element specified by ImageControlID when the target is collapsed

Getter name: get_collapsedImage()
Setter name: set_collapsedImage(value)

autoExpand

Whether to automatically expand the target when the mouse is moved over it

Getter name: get_autoExpand()
Setter name: set_autoExpand(value)

autoCollapse

Whether to automatically collapse the target when the mouse is moved off of it

Getter name: get_autoCollapse()
Setter name: set_autoCollapse(value)

expandDirection

Direction the panel will expand and collapse (can be either "Vertical" or "Horizontal")

Getter name: get_expandDirection()
Setter name: set_expandDirection(value)

Client methods

togglePanel(eventObj)

Event handler to expand or collapse the panel (based on its current state) This is the public function that should be called instead of _toggle if you wish to programmatically open and close the collapsible panel

Params:

• eventObj
  • Type: Object
  • Description: Event info

expandPanel(eventObj)

Open the panel. Public function that users should call if they wish to operate the collapsible panel programmatically

Params:

• eventObj
  • Type: Object
  • Description: Event info

collapsePanel(eventObj)

Collapse the panel. Public function that users should call if they wish to operate the collapsible panel programmatically

Params:

• eventObj
  • Type: Object
  • Description: Event info

Client events

collapsing

Fires when control is collapsing

Add event handler method: add_collapsing(handler)
Remove event handler method: remove_collapsing(handler)
Raise event method: raise_collapsing()

collapsed

Fires when control is collapsed

Add event handler method: add_collapsed(handler)
Remove event handler method: remove_collapsed(handler)
Raise event method: raise_collapsed()

collapseComplete

Fires when collapse completes

Add event handler method: add_collapseComplete(handler)
Remove event handler method: remove_collapseComplete(handler)
Raise event method: raise_collapseComplete()

expanding

Fires when control is expanding

Add event handler method: add_expanding(handler)
Remove event handler method: remove_expanding(handler)
Raise event method: raise_expanding()

expanded

Fires when control is expanded

Add event handler method: add_expanded(handler)
Remove event handler method: remove_expanded(handler)
Raise event method: raise_expanded()

expandComplete

Fires when expand completes

Add event handler method: add_expandComplete(handler)
Remove event handler method: remove_expandComplete(handler)
Raise event method: raise_expandComplete()