Accordion - DevExpress/AjaxControlToolkit GitHub Wiki
The Accordion control represents a series of panes that can be viewed one at a time. The control is used to create "strongly typed" access to the AccordionBehavior. Its major purpose is to structure the content in a way that the AccordionBehavior can understand it.
Properties
| Name | Description |
|---|---|
| AutoSize | Determines how to controll resizing of the Accordion. If it is set to None, then the Accordion can grow as large or as small as necessary. If it is set to Limit, then the Accordion will always be less than or equal to its Height. If it is set to Fill then it will always be equal to its height. The default is None. |
| ContentCssClass | The default Content CSS class |
| ContentTemplate | A template for the content of databound panes |
| Controls | Prevent the Controls property from appearing in the editor (so that people will use the Panes collection instead) |
| DataMember | A member in the DataSource to bind to |
| DataSource | The data source that provides data for populating the list of AccordionPanes |
| DataSourceID | The ID of the DataControl that this control should use to retrieve its data source. When the control is bound to a DataControl, it can retrieve a data source instance on demand, and thereby attempt to work in auto-DataBind mode. |
| FadeTransitions | Whether or not to use a fade effect when transitioning between selected Accordion Panes. The default is false |
| FramesPerSecond | The number of frames per second used in animation effects' transition. This is used to tune performance when using FadeTransition, a large number of Accordion Panes, etc. The default is 30. |
| HeaderCssClass | The default Header CSS class |
| HeaderSelectedCssClass | The default selected Header CSS Class |
| HeaderTemplate | A template for the Header of databound panes |
| Panes | A collection of child panes in the Accordion |
| RequireOpenedPane | Whether or not clicking the header will close the currently opened pane (leaving all the Accordion's panes closed). The default is true |
| SelectedIndex | Index of the AccordionPane to be displayed (this property must be set before OnPreRender). The default is 0 |
| SuppressHeaderPostbacks | Whether or not we suppress the client-side click handlers of any elements (including server controls like Button or HTML elements like anchor) in the header sections of the Accordion. The default is false |
| TransitionDuration | Length of the transition animation in milliseconds. The default is 500 |
Methods
| Name | Description |
|---|---|
| DataBind() | Bind the Accordion to its DataSource |
| FindControl(id) | Override FindControl to look first at this control, then check each of its child AccordionPanes for the control |
Events
| Name | Description |
|---|---|
| ItemCommand | An event to raise when a command is fired |
| ItemCreated | An event to raise when an item (i.e. Pane's Header or Content) is created during data binding |
| ItemDataBound | An event to raise when an item (i.e. Pane's Header or Content) is data bound |
Client properties
| Name | Description |
|---|---|
| autoSize | Controls how the Accordion changes its size to occupy space on a web page. |
| fadeTransitions | True - to use the fading transition effect for Accordion panes, false - for standard transitions. |
| framesPerSecond | The number of steps per second in transition animations. The default value is 30 frames per second. |
| headerCssClass | The name of the CSS class applied to headers. |
| headerSelectedCssClass | The name of the CSS class applied to the selected header. |
| requireOpenedPane | True - to force the Accordion to always have one pane expanded, false - to enable end-users to close all panes. |
| selectedIndex | The index of a pane selected to display its content. |
| suppressHeaderPostbacks | A Boolean value specifying whether the Accordion control will not be interrupted by the default click event of the anchor tag specified in the header element's template. If set to true, this property prevents any client event handler that may interrupt the activity of the Accordion control. |
| transitionDuration | The number of milliseconds a transition effect takes to complete. The default value is 250ms. |
Client methods
| Name | Description |
|---|---|
| addPane(header, content) | Creates a new Accordion pane and adds it to the Panes collection. The method provides references to the created pane's header and content DIVs. |
| getCount() | Returns the total number of panes. |
| getPane(index) | Returns an Accordion pane specified by its index. If no index is provided, the currently selected pane is returned. |
Client events
| Name | Description |
|---|---|
| selectedIndexChanged | Fires after a pane header is clicked and the Accordion changes the selected pane. |
| selectedIndexChanging | Fires after a pane header is clicked but before the Accordion changes the selected pane. |
Client properties
autoSize
Controls how the Accordion changes its size to occupy space on a web page.
Remarks: If set to None, the Accordion grows/shrinks vertically without restriction when its pane is expanded/collapsed; this can cause other elements on a web page to move up and down with it. If set to Limit, the Accordion never grows larger than the value specified by its Height property; this will cause the Accordion content to scroll if it is too large to be displayed. If set to Fill, the Accordion always keeps the same size as its Height property. This will cause the content to be expanded or shrunk if it isn't of the right size.
Getter name: get_autoSize()
fadeTransitions
True - to use the fading transition effect for Accordion panes, false - for standard transitions.
Getter name: get_fadeTransitions()Setter name: set_fadeTransitions(value)
framesPerSecond
The number of steps per second in transition animations. The default value is 30 frames per second.
Getter name: get_framesPerSecond()Setter name: set_framesPerSecond(value)
headerCssClass
The name of the CSS class applied to headers.
Getter name: get_headerCssClass()Setter name: set_headerCssClass(value)
headerSelectedCssClass
The name of the CSS class applied to the selected header.
Getter name: get_headerSelectedCssClass()Setter name: get_headerSelectedCssClass(value)
requireOpenedPane
True - to force the Accordion to always have one pane expanded, false - to enable end-users to close all panes.
Getter name: get_requireOpenedPane()Setter name: set_requireOpenedPane(value)
selectedIndex
The index of a pane selected to display its content.
Getter name: get_selectedIndex()Setter name: set_selectedIndex(value)
suppressHeaderPostbacks
A Boolean value specifying whether the Accordion control will not be interrupted by the default click event of the anchor tag specified in the header element's template. If set to true, this property prevents any client event handler that may interrupt the activity of the Accordion control.
Getter name: get_suppressHeaderPostbacks()Setter name: set_suppressHeaderPostbacks(value)
transitionDuration
The number of milliseconds a transition effect takes to complete. The default value is 250ms.
Getter name: get_transitionDuration()Setter name: set_transitionDuration(value)
Methods
DataBind()
Bind the Accordion to its DataSource
FindControl(id)
Override FindControl to look first at this control, then check each of its child AccordionPanes for the control
Params:
- id
- Type: String
- Description: ID of the control to find
Client methods
addPane(header, content)
Creates a new Accordion pane and adds it to the Panes collection. The method provides references to the created pane's header and content DIVs.
Params:
-
header
- Type: Object
- Description: header element of the new Accordion pane
-
content
- Type: Object
- Description: content element of the new Accordion pane
getCount()
Returns the total number of panes.
getPane(index)
Returns an Accordion pane specified by its index. If no index is provided, the currently selected pane is returned.
Params:
- index
- Type: Number
- Description: index of the desired Accordion pane. If the index is not provided, we use the currently selected index. In the event the provided index (or the currently selected index) is outside the bounds of the panes collection, we return null.
Client events
selectedIndexChanged
Fires after a pane header is clicked and the Accordion changes the selected pane.
Add event handler method: add_selectedIndexChanged(handler)Remove event handler method: remove_selectedIndexChanged(handler)Raise event method: raise_selectedIndexChanged()
selectedIndexChanging
Fires after a pane header is clicked but before the Accordion changes the selected pane.
Add event handler method: add_selectedIndexChanging(handler)Remove event handler method: remove_selectedIndexChanging(handler)Raise event method: raise_selectedIndexChanging()