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.

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>
        ...
    </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:

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

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

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

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:

<dx:BootstrapTabControl ID="TabControlAutoPostBack" runat="server" AutoPostBack="true" OnActiveTabChanged="TabControlAutoPostBack_ActiveTabChanged">
    <Tabs>
        ...
    </Tabs>
</dx:BootstrapTabControl>

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.

  • ActiveTabIconCssClassField - Specifies the name of a data field providing CSS classes of icons displayed by the active tab.
  • TabIconCssClassField - Specifies the name of a data field providing CSS classes of icons displayed by tabs.
  • NameField - Specifies the name of a data field providing unique identifiers to tabs.
  • NavigateUrlField - Specifies the name of a data field providing tab navigation locations.
  • TextField - Specifies the name of a data field providing tab display texts.
  • ToolTipField - Specifies the name of a data field providing tab tooltip texts.

You can modify settings of each auto-created Tab object during data binding in the TabDataBound event.

<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:

BootstrapTab properties:

<dx:BootstrapTabControl runat="server" ActiveTabIndex="2">
    <Tabs>
        ...
        <dx:BootstrapTab Name="Messages" TabCssClass="dropdown">
            <TabTemplate>
                <a class="dropdown-tab" href="javascript:;">
                    Messages
                    <span class="fa fa-caret-down"></span>
                </a>
                <dx:BootstrapPopupMenu runat="server" ClientInstanceName="messagesMenu" AllowSelectItem="true"
                    PopupElementCssSelector=".active > .dropdown-tab" PopupAction="LeftMouseClick"
                    PopupHorizontalAlign="LeftSides" PopupVerticalAlign="Below">
                    <Items>
                        <dx:BootstrapMenuItem Text="Inbox" NavigateUrl="javascript:;" />
                        ...
                    </Items>
                </dx:BootstrapPopupMenu>
            </TabTemplate>
        </dx:BootstrapTab>
    </Tabs>
    <ClientSideEvents ActiveTabChanged="onTabActivated" />
</dx:BootstrapTabControl>

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.

Trace Events:
<dx:BootstrapTabControl runat="server">
    <ClientSideEvents
        Init="onInit"
        TabClick="onTabClick"
        ActiveTabChanging="onActiveTabChanging"
        ActiveTabChanged="onActiveTabChanged" />
    <Tabs>
        ...
    </Tabs>
</dx:BootstrapTabControl>

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.

BootstrapClientTabControl methods:

BootstrapClientTab methods:

<dx:BootstrapTabControl runat="server" ClientInstanceName="tabControl">
    <Tabs>
        ...
    </Tabs>
</dx:BootstrapTabControl>
Screen Size
Color Themes
Demo QR Code