ASP.NET AJAX Control Toolkit Demos v20.1.0.0

Accordion Sample
Ajax Control Toolkit
Accordion Demonstration
The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.
Fade Transitions:
AutoSize:
Accordion Description
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 Members
Properties
  • 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
  • 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
  • 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
Accordion Known Issues

The AutoSize "Limit" mode works exactly the same as the "Fill" mode for Internet Explorer 6 and 7 because they do not support the max-height CSS property.


If you place the Accordion inside a <table> tag and have FadeTransitions set to true in Internet Explorer 6, it will affect the spacing between Accordion Panes.


Also, when viewing the demo in Internet Explorer 6, maximizing the browser at higher resolutions like 1600 x 1200 will cause the transitions to animate slower than at lower resolutions like 1280 x 1024.

Copyright © 2012-2024 CodePlex Foundation. All Rights Reserved.