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.

ASPXCopy 
<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-tachometer-alt">
                </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 Accordion 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.

ASPXJSCopy 
<dx:BootstrapAccordion runat="server" AllowSelectItem="true">
    <ClientSideEvents ItemClick="onItemClick_ItemsSelection" />
    <Groups>
        <dx:BootstrapAccordionGroup Text=".NET Controls">
            <Items>
                <dx:BootstrapAccordionItem Text="WinForms" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET" Selected="true">
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET MVC" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="WPF" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Cross Platform">
            <Items>
                <dx:BootstrapAccordionItem Text="Reporting" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="Document Server" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
    </Groups>
</dx:BootstrapAccordion>
function onItemClick_ItemsSelection(s, e) {
    dxbsDemo.showToast("The '" + s.GetSelectedItem().GetText() + "' item has been selected.");
}

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.

ASPXCopy 
<dx:BootstrapAccordion runat="server" AutoCollapse="true">
    <Groups>
        <dx:BootstrapAccordionGroup Text=".NET Controls">
            <Items>
                <dx:BootstrapAccordionItem Text="WinForms" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET MVC" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="WPF" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Cross Platform">
            <Items>
                <dx:BootstrapAccordionItem Text="Reporting" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="Document Server" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
    </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.

Note that in this demo the callback time is intentionally extended so that the loading indicator is visible during callbacks.

ASPXCopy 
<dx:BootstrapAccordion runat="server" EnableCallBacks="true">
    <Groups>
        <dx:BootstrapAccordionGroup Text=".NET Controls" Expanded="false">
            <Items>
                <dx:BootstrapAccordionItem Text="WinForms" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET MVC" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="WPF" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Cross Platform" Expanded="false">
            <Items>
                <dx:BootstrapAccordionItem Text="Reporting" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="Document Server" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
    </Groups>
</dx:BootstrapAccordion>

Badges

The Accordion control can display supplementary information for any item or group within a badge. A badge can display text, an icon or both. Use the following API to configure badges on the server side:

The methods listed below allow you to manipulate badges on the client:

Note that the BootstrapAccordionGroup.HeaderBadge and BootstrapAccordionItem.Badge properties do not effect templated group headers and items.

ASPXJSCopy 
<dx:BootstrapAccordion runat="server">
    <Groups>
        <dx:BootstrapAccordionGroup Text=".NET Controls">
            <Items>
                <dx:BootstrapAccordionItem Text="WinForms" >
                    <Badge Text="160+" />
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET" >
                    <Badge Text="100+" />
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET MVC" >
                    <Badge Text="65+" />
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="WPF" >
                    <Badge Text="110+" />
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Cross Platform" Expanded="false">
            <HeaderBadge Text="2" />
            <Items>
                <dx:BootstrapAccordionItem Text="Reporting" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="Document Server" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
    </Groups>
    <ClientSideEvents ItemClick="onItemWithBadgeClick" ExpandedChanged="onGroupWithHeaderBadgeExpanded" />
</dx:BootstrapAccordion>
function onItemWithBadgeClick(s, e) {
    if(e.item.GetBadgeText())
        e.item.SetBadgeText("");
}
function onGroupWithHeaderBadgeExpanded(s, e) {
    var group = e.group;
    if(group.GetExpanded() && group.GetHeaderBadgeText())
        group.SetHeaderBadgeText("");
}

Render Option

Use the following properties to customize the Accordion group's appearance:

ASPXCopy 
<dx:BootstrapAccordion runat="server" AutoCollapse="true">
    <Groups>
        <dx:BootstrapAccordionGroup Text="Dashboard">
            <SettingsBootstrap RenderOption="Primary" />
            <Items>
                <dx:BootstrapAccordionItem Text="Tools" />
                <dx:BootstrapAccordionItem Text="Reports" />
                <dx:BootstrapAccordionItem Text="Analytics" />
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Sales">
            <SettingsBootstrap RenderOption="Dark" />
            <Items>
                <dx:BootstrapAccordionItem Text="New Sales" />
                <dx:BootstrapAccordionItem Text="Sales Reports" />
                <dx:BootstrapAccordionItem Text="Deliveries" />
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Messages">
            <SettingsBootstrap RenderOption="Light" />
            <Items>
                <dx:BootstrapAccordionItem Text="Inbox" />
                <dx:BootstrapAccordionItem Text="Outbox" />
                <dx:BootstrapAccordionItem Text="Sent" />
            </Items>
        </dx:BootstrapAccordionGroup>
    </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:

ASPXC#Copy 
<dx:BootstrapAccordion ID="AccordionAutoPostBack" runat="server" AutoPostBack="true" OnItemClick="AccordionAutoPostBack_ItemClick" OnHeaderClick="AccordionAutoPostBack_HeaderClick">
    <Groups>
        <dx:BootstrapAccordionGroup Text=".NET Controls">
            <Items>
                <dx:BootstrapAccordionItem Text="WinForms" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET MVC" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="WPF" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Cross Platform">
            <Items>
                <dx:BootstrapAccordionItem Text="Reporting" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="Document Server" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
    </Groups>
</dx:BootstrapAccordion>
protected void AccordionAutoPostBack_ItemClick(object source, DevExpress.Web.Bootstrap.BootstrapAccordionItemEventArgs e) {
    DemoUtils.ShowToast(AutoPostBack, string.Format("The '{0}' item has been clicked.", e.Item.Text));
}
protected void AccordionAutoPostBack_HeaderClick(object source, DevExpress.Web.Bootstrap.BootstrapAccordionGroupCancelEventArgs e) {
    DemoUtils.ShowToast(AutoPostBack, string.Format("The '{0}' group header has been clicked.", e.Group.Text));
}

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.

You can modify settings of each auto-created Item or Group object during data binding in the ItemDataBound and GroupDataBound events.

ASPXCopy 
<dx:BootstrapAccordion runat="server" DataSourceID="AccordionDataSource" AutoCollapse="true">
    <GroupDataFields TextField="Title" />
    <ItemDataFields TextField="Title" />
</dx:BootstrapAccordion>
<asp:XmlDataSource runat="server" ID="AccordionDataSource" DataFile="~/App_Data/xcrm.xml" XPath="/XCRM/*"></asp:XmlDataSource>

Templates

The Accordion control supports templates allowing you to customize control appearance and layout. A template can be applied to all items or groups (using control level templates) or specific ones (using item/group level templates). Use the following properties to specify templates.

BootstrapAccordion properties:

  • GroupContentTemplate - Specifies a common template used for displaying the content of all groups within the current accordion control.
  • GroupHeaderTemplate / GroupHeaderTemplateCollapsed - Specify common template used for displaying the headers of all groups within the current accordion control.
  • ItemTemplate - Specifies a common template used for displaying the content of all items within the current accordion control.
  • ItemTextTemplate - Specifies a common template used for displaying the text content of all items within the current accordion control.

BootstrapAccordionGroup properties:

  • ContentTemplate - Specifies a common template used for displaying the content of the current accordion group.
  • HeaderTemplate / HeaderTemplateCollapsed - Specifies a common template used for displaying the header of the current accordion group.
  • ItemTemplate - Specifies a common template used for displaying the content of all items within the current accordion group.
  • ItemTextTemplate - Specifies a common template used for displaying the text content of all items within the current accordion group.

BootstrapAccordionItem properties:

  • Template - Specifies a template used for displaying the content of the current item.
  • TextTemplate - Specifies a template used for displaying the text content of the current item.
ASPXCopy 
<dx:BootstrapAccordion runat="server">
    <GroupContentTemplate>
        <div class="card">
            <div class="list-group list-group-flush">
                <asp:Repeater runat="server" DataSource="<%# Container.Group.Items %>">
                    <ItemTemplate>
                        <a href="javascript:;" class="list-group-item list-group-item-action">
                            <h4 class="list-group-item-heading"><%# Eval("Text") %></h4>
                            <p class="list-group-item-text">
                                DevExpress <%# Eval("Text") + " " + (Eval("Group.Name").ToString() == "UIControls"
                                    ? (Eval("Name").ToString() == "MVC" ? "Extensions" : "Controls and Libraries")
                                    : "") %> for the .NET Framework.
                            </p>
                        </a>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </div>
    </GroupContentTemplate>
    <Groups>
        <dx:BootstrapAccordionGroup Name="UIControls" Text=".NET Controls">
            <Items>
                <dx:BootstrapAccordionItem Name="WIN" Text="WinForms">
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Name="ASP" Text="ASP.NET">
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Name="MVC" Text="ASP.NET MVC" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Name="WPF" Text="WPF" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Cross Platform" Expanded="false">
            <Items>
                <dx:BootstrapAccordionItem Name="Reporting" Text="Reporting" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Name="DocumentServer" Text="Document Server" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
    </Groups>
</dx:BootstrapAccordion>

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.

The item.name and group.name properties of the event handler's parameter allow you to identify the item for which an event has been raised.

  • ItemClick - Fires when an end-user clicks an accordion item.
  • HeaderClick - Fires when an end-user clicks a group header.
  • ExpandedChanging - Fires before the expansion state of a group is changed. Allows to cancel this operation or force processing the event on the server side.
  • ExpandedChanged - Fires after the expansion state of a group is changed.
Trace Events:
ASPXJSCopy 
<dx:BootstrapAccordion runat="server">
    <ClientSideEvents
        ExpandedChanged="onExpandedChanged"
        ExpandedChanging="onExpandedChanging"
        HeaderClick="onHeaderClick"
        Init="onInit"
        ItemClick="onItemClick" />
    <Groups>
        <dx:BootstrapAccordionGroup Text=".NET Controls">
            <Items>
                <dx:BootstrapAccordionItem Text="WinForms" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET" Selected="true">
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="ASP.NET MVC" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="WPF" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Cross Platform">
            <Items>
                <dx:BootstrapAccordionItem Text="Reporting" >
                </dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="Document Server" >
                </dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
    </Groups>
</dx:BootstrapAccordion>
function onExpandedChanged(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ExpandedChanged');
}
function onExpandedChanging(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ExpandedChanging');
}
function onHeaderClick(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'HeaderClick');
}
function onInit(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Init');
}
function onItemClick(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ItemClick');
}

Client-Side Functionality

The Accordion control offers an advanced client-side API allowing you to manipulate the control and its elements.

The EnableClientSideAPI property specifies whether or not the client-side API is available. Note that the client-side API is automatically enabled if the ClientInstanceName property is specified or any client-side event available through the ClientSideEvents property is handled.

This demo allows you to interactively explore capabilities of the Accordion control's client-side API.

BootstrapClientAccordion methods:

BootstrapClientAccordionItem methods:

BootstrapClientAccordionGroup methods:

ASPXCopy 
<dx:BootstrapAccordion ClientInstanceName="accordion" AllowSelectItem="true" runat="server">
    <Groups>
        <dx:BootstrapAccordionGroup Text="Group 1">
            <Items>
                <dx:BootstrapAccordionItem Text="Item 1"></dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="Item 2"></dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="Item 3" IconCssClass="fa fa-cogs"></dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Group 2" Expanded="false">
            <Items>
                <dx:BootstrapAccordionItem Text="Item 1"></dx:BootstrapAccordionItem>
                <dx:BootstrapAccordionItem Text="Item 2"></dx:BootstrapAccordionItem>
            </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Group 3" Expanded="false"></dx:BootstrapAccordionGroup>
    </Groups>
</dx:BootstrapAccordion>
Screen Size
Color Themes
Demo QR Code