Default Accordion

The Accordion control allows you to provide navigation capabilities to your web application. The control displays navigation items arranged in collapsible groups. Groups within the Accordion can be accessed through the Groups property. Each group has a collection of items available through the BootstrapAccordionGroup.Items property.

<dx:BootstrapAccordion runat="server">
    <Groups>
        <dx:BootstrapAccordionGroup Text="Tables">
            <Items>
                <dx:BootstrapAccordionItem Text="Users" IconCssClass="fa fa-user">
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="Tasks" IconCssClass="fa fa-tasks">
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="Scheduler" IconCssClass="fa fa-calendar">
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Analysis">
            <Items>
                <dx:BootstrapAccordionItem Text="Dashboard" IconCssClass="fa fa-dashboard">
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="KPI" IconCssClass="fa fa-percent">
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
    </Groups>
</dx:BootstrapAccordion>

Items Selection

The Accordion control supports selection of items with a mouse click client/server-side API. Set the Accordion control’s AllowSelectItem property to true to allow item selection.

Use the following API to programmatically get or set the selection status:

Moreover, the BootstrapAccordion control can automatically select an item for a current page. You can control this behavior using the SyncSelectionMode property.

To respond to selection changes, subscribe to the BootstrapClientAccordion.ItemClick client event or ItemClick server event.

<dx:BootstrapAccordion runat="server" AllowSelectItem="true">
    <ClientSideEvents ItemClick="onItemClick_ItemsSelection" />
    <Groups>
        ...
    </Groups>
</dx:BootstrapAccordion>

Auto Collapse

When the Auto Collapse feature is activated, only one Accordion group can be expanded at a time. To activate this functionality, set the Accordion control’s AutoCollapse property to true.

<dx:BootstrapAccordion runat="server" AutoCollapse="true">
    <Groups>
        ...
    </Groups>
</dx:BootstrapAccordion>

Load Content on Callbacks

The Accordion control supports loading the content of collapsed groups using callbacks the first time a group is expanded. This approach allows the Accordion control to avoid the initial transfer of the group’s data to the client, thus optimizing the page’s load time. To enable callbacks, set the EnableCallBacks property to true.

When a group is expanded for the first time, its content is retrieved from the server and then cached on the client. The next time the group is expanded, its content is taken from the cache and no callback to the server is performed. For demonstration purposes, the callback processing time is intentionally extended in this demo.

<dx:BootstrapAccordion runat="server" EnableCallBacks="true">
    <Groups>
        ...
    </Groups>
</dx:BootstrapAccordion>

Auto PostBack

The Auto Postback feature allows the Accordion control to automatically initiate a postback when an end-user performs an action that you can handle on the server side (e.g., clicks an accordion item). Set the AutoPostBack property to true to enable this feature.

Depending on the performed action, one of the following events fires on the server in response to a postback:

  • ItemClick – Fires when an end-user clicks an accordion item.
  • HeaderClick – Fires when an end-user clicks a group header.
  • ExpandedChanging – Fires when a group is about to expand or collapse.
  • ExpandedChanging – Fires when a group has expanded or collapsed.
<dx:BootstrapAccordion runat="server" AutoPostBack="true" OnItemClick="AccordionAutoPostBack_ItemClick" OnHeaderClick="AccordionAutoPostBack_HeaderClick">
    <Groups>
        ...
    </Groups>
</dx:BootstrapAccordion>

Data Binding

The Accordion control supports binding to a data source which can be any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (e.g., SiteMapDataSource, XmlDataSource, etc.). Set the DataSourceID property to assign a data source to an Accordion control.

A data-bound Accordion control automatically creates accordion groups and items for all recognized first and second level data items respectively. Created groups and items obtain values for their properties from data item attributes with matching names. You can also explicitly specify mappings between group or item properties and names of data item attributes using the following properties.

  • GroupDataFields – Provides access to properties specifying data fields from which accordion group settings should be obtained.
  • ItemDataFields – Provides access to properties specifying data fields from which accordion item settings should be obtained.
<dx:BootstrapAccordion runat="server" DataSourceID="XmlDataSource1" AutoCollapse="true">
    <GroupDataFields TextField="Title" />
    <ItemDataFields TextField="Title" />
</dx:BootstrapAccordion>
<asp:XmlDataSource runat="server" ID="XmlDataSource1" DataFile="~/App_Data/xcrm.xml" XPath="/XCRM/*"></asp:XmlDataSource>

Client-Side Events

This demo illustrates the capabilities of the Accordion control's client events and allows you to specify which client-side events you want to track. Interact with the Accordion interface to see the information about all tracked events raised in response to your actions in the event log.

Trace Events:
<dx:BootstrapAccordion runat="server">
    <ClientSideEvents
        ExpandedChanged="onExpandedChanged"
        ExpandedChanging="onExpandedChanging"
        HeaderClick="onHeaderClick"
        Init="onInit"
        ItemClick="onItemClick" />
    <Groups>
        ...
    </Groups>
</dx:BootstrapAccordion>
Screen Size
Color Themes
Demo QR Code