Accordion Reference


Accordion Server Reference

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.

Accordion Server Properties

Name Description
AccordionExtender Reference to the AccordionExtender wrapped by the Accordion control
AutoSize Determine how growth of the Accordion will be controlled. 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.
ContentCssClass Default Content CSS Class
ContentTemplate 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 Member in the DataSource to bind to
DataSource Gets or sets 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
FramesPerSecond The number of frames per second used in the transition animation effects. This is used to tune performance when using FadeTransition, a large number of Accordion Panes, etc.
HeaderCssClass Default Header CSS Class
HeaderSelectedCssClass Default selected Header CSS Class
HeaderTemplate Template for the Header of databound panes
IsBoundUsingDataSourceID Whether or not the Accordion was databound using the DataSourceID property rather than setting the DataSource directly
Panes 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)
RequiresDataBinding Whether or not the control has already been databound, or still needs to be databound
SelectArguments Arguments used to request data-related operations from data source controls when data is retrieved
SelectedIndex Index of the AccordionPane to be displayed (this property must be set before OnPreRender)
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.
TransitionDuration Length of the transition animation in milliseconds

Accordion Server Methods

Name Description
Constructor Default constructor that tells ASP.NET to render it as a DIV
ClearPanes Empty out the child Pane's collection
ConnectToDataSourceView Connects this data bound control to the appropriate DataSourceView and hooks up the appropriate event listener for the DataSourceViewChanged event. The return value is the new view (if any) that was connected to. An exception is thrown if there is a problem finding the requested view or data source.
CreateChildControls Create the AccordionExtender and attach it to the div that will be generated for this control
CreateControlHierarchy(System.Boolean) Create the new control hierarchy of AccordionPanes (using the DataSource if specificed)
CreateDataSourceSelectArguments Create the DataSourceSelectArguments (which just defaults to the Empty value because we don't want to sort, filter, etc.)
CreateItem(System.Object, System.Int32, AjaxControlToolkit.AccordionItemType, AjaxControlToolkit.AccordionContentPanel, System.Web.UI.ITemplate, System.Boolean) Create an AccordionPane's item (either Header or Content) and raise the ItemCreated event
DataBind Bind the Accordion to its DataSource
DoSelect(System.Collections.IEnumerable) Select the data
EnsureDataBound Ensure that the Accordion has been databound if it needed to be
FindControl(System.String) Override FindControl to look first at this control, then check each of its child AccordionPanes for the control
GetData Returns an IEnumerable that is the DataSource, which either came from the DataSource property or from the control bound via the DataSourceID property.
OnBubbleEvent(System.Object, System.EventArgs) Wrap the CommandArgs of an ItemCommand event with AccordionCommandEventArgs
OnDataBinding(System.EventArgs) DataBind the Accordion to its panes
OnDataPropertyChanged This method is called when DataMember, DataSource, or DataSourceID is changed.
OnDataSourceViewChanged(System.Object, System.EventArgs) Indicate that we need to be databound whenever the DataSourceView changes
OnInit(System.EventArgs) OnInit handler to wireup the Page's PreLoad event
OnItemCommand(AjaxControlToolkit.AccordionCommandEventArgs) Raise the ItemCommand event
OnItemCreated(AjaxControlToolkit.AccordionItemEventArgs) Raise the ItemCreatedEvent
OnItemDataBound(AjaxControlToolkit.AccordionItemEventArgs) Raise the ItemDataBound event
OnLoad(System.EventArgs) Connect to the DataSourceView and determine if we still need to do databinding
OnPagePreLoad(System.Object, System.EventArgs) OnPreLoad is used to determine whether or not we still need to databind the Accordion
OnPreRender(System.EventArgs) Mark the selected AccordionPane so it does not appear collapsed

Accordion Server Events

Name Description
ItemCommand Event to raise when a command is fired
ItemCreated Event to raise when an item (i.e. Pane's Header or Content) is created during data binding
ItemDataBound Event to raise when an item (i.e. Pane's Header or Content) is data bound


AccordionBehavior Client Reference

The AccordionBehavior is used to turn properly structured XHTML into an Accordion with panes that can expand one at a time.

AccordionBehavior Client Properties

Name Description
AutoSize AutoSize mode
Count Panes count
FadeTransitions Whether or not to fade the accordion panes when transitioning
FramesPerSecond Number of steps per second in the transition animations. The default value is 30 frames per second.
HeaderCssClass This is the CSS class applied to each header.
HeaderSelectedCssClass This is the CSS class applied to the selected header.
Pane Get a specific Accordion pane given its index. If no index is provided, get the currently selected pane.
requireOpenedPane Whether or not clicking the header will close the currently opened pane (which leaves all the Accordion's panes closed)
SelectedIndex Index of the currently selected Accordion section
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.
TransitionDuration Length of time to transition between Accordion sections in milleseconds. The default value is 250ms.


AccordionBehavior Client Methods

Name Description
addPane Create a new Accordion pane given references to its header and content divs and add it to the _panes collection. We also wrap the content div in a new container div, add a click handler to the header div, etc.
dispose Dispose of the AccordionBehavior
initialize The initialize function is responsible for getting the selected index from the ClientState mechanism and walking the children of the behavior's target to find all of the accordion's child panes. It builds up a collection of the panes from the headers and content sections. Then we hide all the content sections that aren't selected and initialize the layout.
raiseSelectedIndexChanged Raise the selectedIndexChanged event
raiseSelectedIndexChanging Raise the selectedIndexChanging event


AccordionBehavior Client Events

Name Description
selectedIndexChanged Add an event handler for the selectedIndexChanged event
selectedIndexChanging Add an event handler for the selectedIndexChanging event


Last edited Jun 30, 2015 at 1:50 PM by IlyaKhD, version 3