Default Tab Control

The Tab Control provides a visual interface for creating custom tabbed layouts. The Tab Control provides only navigation means and requires manually updating specific content to reflect a selected tab's changes.

• TabControl.ActiveTab - specifies the current active tab.
• TabControl.TabClick / ClientTabControl.TabClick - Occurs when an end-user clicks a tab.
• TabControl.ActiveTabChanged - Occurs when an end-user changes an active tab by clicking another tab.
• ClientTabControl.ActiveTabChanging - Occurs before an active tab is changed. Allows to cancel this operation or force processing the event on the server side.
• BootstrapTab.Name - Specifies a tab's name, which identifies the item in the Tabs collection.
• BootstrapTab.Text - Specifies a tab's display text.
• BootstrapTab.TabIconCssClass - Specifies the CSS class of an icon displayed by a tab.
• BootstrapTab.NavigateUrl - Specifies a tab's navigation location.

Use the Page Control to associate specific contents with each tab.

<dx:BootstrapTabControl runat="server">
    <Tabs>
        <dx:BootstrapTab Text="Home">
        </dx:BootstrapTab>
        <dx:BootstrapTab Text="Products">
        </dx:BootstrapTab>
        <dx:BootstrapTab Text="Support">
        </dx:BootstrapTab>
    </Tabs>
</dx:BootstrapTabControl>

Tab Alignment

Use the TabAlign property to specify the alignment of tabs within the control. The following modes are supported: Justify, Left, Right.

<dx:BootstrapTabControl runat="server" TabAlign="Justify">
    <Tabs>
        <dx:BootstrapTab Text="Home">
        </dx:BootstrapTab>
        <dx:BootstrapTab Text="Products">
        </dx:BootstrapTab>
        <dx:BootstrapTab Text="Support">
        </dx:BootstrapTab>
    </Tabs>
</dx:BootstrapTabControl>

Badges

The Tab Control can display supplementary information for any tab within a badge. A badge can display a text, an icon or both. Use the following API to set the contents of item badges:

• BootstrapTab.Badge - Gets or sets the tab badge on the server.

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

• BootstrapClientTab.GetBadgeText - Gets the text of the tab badge.
• BootstrapClientTab.SetBadgeText - Sets the text of the tab badge.
• BootstrapClientTab.GetBadgeIconCssClass - Gets the icon CSS class of the tab badge.
• BootstrapClientTab.SetBadgeIconCssClass - Sets the icon CSS class of the tab badge.

Note that the BootstrapTab.Badge property does not affect templated tabs.

<dx:BootstrapTabControl runat="server">
    <Tabs>
        <dx:BootstrapTab Text="Home" />
        <dx:BootstrapTab Text="Profile" />
        <dx:BootstrapTab Text="Messages">
            <Badge Text="1" />
        </dx:BootstrapTab>
    </Tabs>
    <ClientSideEvents TabClick="onTabWithBadgeClick" />
</dx:BootstrapTabControl>

function onTabWithBadgeClick(s, e) {
    if (e.tab.GetBadgeText())
        e.tab.SetBadgeText("");
}

Auto PostBack

If the AutoPostBack property is set to true, the Tab Control automatically initiates a postback when an end-user performs an action that you can handle on the server side (for example, switches the tab).

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

• ActiveTabChanged - Fires when the active page was changed.
• ActiveTabChanging - Fires when the active page is being changed.

<dx:BootstrapTabControl ID="TabControlAutoPostBack" runat="server" AutoPostBack="true" OnActiveTabChanged="TabControlAutoPostBack_ActiveTabChanged">
    <Tabs>
        <dx:BootstrapTab Text="Home">
        </dx:BootstrapTab>
        <dx:BootstrapTab Text="Products">
        </dx:BootstrapTab>
        <dx:BootstrapTab Text="Support">
        </dx:BootstrapTab>
    </Tabs>
</dx:BootstrapTabControl>

protected void TabControlAutoPostBack_ActiveTabChanged(object source, DevExpress.Web.Bootstrap.BootstrapTabControlEventArgs e) {
    DemoUtils.ShowToast(AutoPostBack, string.Format("The '{0}' tab has been activated.", e.Tab.Text));
}

Data Binding

This demo illustrates how the Tab Control can be populated with tab information taken from a data source. The Tab Control supports standard data binding - any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface may be used as a data source for this control. In this sample, the Tab Control is bound to the XmlDataSource component that obtains data from an xml file. Set the DataSourceID property to assign a data source to a Tab Control.

A data-bound Tab Control automatically creates a tab for each data item. A created tab obtains values for its properties from data item attributes with matching names. You can also explicitly specify mappings between tab properties and names of data item attributes using the following properties.

<dx:BootstrapTabControl runat="server" DataSourceID="TabControlDataSource"
    NavigateUrlField="id" NavigateUrlFormatString="~/Navigation/Tabs.aspx?id={0}#Data_Binding">
</dx:BootstrapTabControl>
<asp:XmlDataSource ID="TabControlDataSource" runat="server" DataFile="~/App_Data/Platforms.xml"
    XPath="//product"></asp:XmlDataSource>

Templates

The Tab Control supports templates allowing you to customize control appearance and layout. A template can be applied to all tabs (using control level templates) or a specific tab (using item level templates). Moreover, templates can be specified for tabs in both active and inactive states. Use the following properties to specify templates.

BootstrapTabControl properties:

• TabTemplate / ActiveTabTemplate - Specify common templates used for displaying the content of all tabs within the current tab control.
• TabTextTemplate / ActiveTabTextTemplate - Specify common templates used for displaying the text content of all tabs within the current tab control.

BootstrapTab properties:

• TabTemplate / ActiveTabTemplate - Specify templates used for displaying the content of the current tab.
• TabTextTemplate / ActiveTabTextTemplate - Specify templates used for displaying the text content of the current tab.

<dx:BootstrapTabControl runat="server" ActiveTabIndex="2">
    <Tabs>
        <dx:BootstrapTab Name="Home" Text="Home" />
        <dx:BootstrapTab Name="Profile" Text="Profile" />
        <dx:BootstrapTab Name="Messages" Text="Messages">
            <ActiveTabTemplate>
                <div class="dropdown">
                    <a href="#" class="nav-link active dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Messages</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Inbox</a>
                        <a class="dropdown-item" href="#">Sent Items</a>
                        <a class="dropdown-item" href="#">Drafts</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Spam</a>
                    </div>
                </div>
            </ActiveTabTemplate>
        </dx:BootstrapTab>
    </Tabs>
    <ClientSideEvents TabClick="onDropdownTabClick" />
</dx:BootstrapTabControl>

function onDropdownTabClick(s, e) {
    if(e.tab.name == "Messages" && s.GetActiveTab() != e.tab) {
        $(".nav-link.dropdown-toggle").dropdown("toggle");
        e.htmlEvent.stopPropagation();
    }
}

Client-Side Events

This demo illustrates the capabilities of the Tab Control's client events and allows you to specify which client-side events you want to track.

The tab.name property of the event handler's parameter allows you to identify the tab for which an event has been raised.

• TabClick - Fires when an end-user clicks a toolbar item.
• ActiveTagChanging - Fires when the active tab is being changed. Allows to cancel this operation or force processing the event on the server side.
• ActiveTabChanged - Fires after the active tab was changed.

Interact with a Tab control interface below to see the information about all tracked events raised in response to your actions in the event log.

<dx:BootstrapTabControl runat="server">
    <ClientSideEvents
        Init="onInit"
        TabClick="onTabClick"
        ActiveTabChanging="onActiveTabChanging"
        ActiveTabChanged="onActiveTabChanged" />
    <Tabs>
        <dx:BootstrapTab Text="Home">
        </dx:BootstrapTab>
        <dx:BootstrapTab Text="Products">
        </dx:BootstrapTab>
        <dx:BootstrapTab Text="Support">
        </dx:BootstrapTab>
    </Tabs>
</dx:BootstrapTabControl>

function onInit(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Init');
}
function onTabClick(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'TabClick');
}
function onActiveTabChanging(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ActiveTabChanging');
}
function onActiveTabChanged(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ActiveTabChanged');
}

Client-Side Functionality

The Tab 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 Tab Control's client-side API.

<dx:BootstrapTabControl runat="server" ClientInstanceName="tabControl">
    <Tabs>
        <dx:BootstrapTab Text="Tab 1" ActiveTabIconCssClass="fa fa-check">
        </dx:BootstrapTab>
        <dx:BootstrapTab Text="Tab 2" ActiveTabIconCssClass="fa fa-check">
        </dx:BootstrapTab>
        <dx:BootstrapTab Text="Tab 3" ActiveTabIconCssClass="fa fa-check">
        </dx:BootstrapTab>
    </Tabs>
</dx:BootstrapTabControl>

Screen Size

Color Themes

Demo QR Code