Default Page Control

The Page Control presents content as a set of tabbed pages. Each page in the Page Control serves as a separate container of child controls allowing you to associate specific page content with each displayed tab.

To only display tabs without associated content, use the Tab Control. Unlike the Page Control, the Tab Control provides only navigation means and requires you to manually update specific content to reflect the change of a selected tab.

<dx:BootstrapPageControl runat="server">
    <TabPages>
        <dx:BootstrapTabPage Text="Home">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    ...
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Products">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    ...
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Support">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    ...
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
    </TabPages>
</dx:BootstrapPageControl>

Tab Alignment

Use the TabAlign property to specify the alignment of tabs within the control. The following modes are supported.

  • Justify
  • Left
  • Right
<dx:BootstrapPageControl runat="server" TabAlign="Justify">
    <TabPages>
        ...
    </TabPages>
</dx:BootstrapPageControl>

Load Content on Callbacks

The Page Control exposes the EnableCallbacks property allowing you to specify whether or not to use callbacks to obtain page contents from the server. If the property is set to true, only the content of the active page is sent to the client during the first request. The content of every other page is obtained from the server only once - when the page is first activated. The page content is loaded using a callback without refreshing the entire page.

If the property is set to false, the contents of all pages are sent to the client with the first response, and switching the active page never initiates a callback.

<dx:BootstrapPageControl runat="server" EnableCallBacks="true">
    <TabPages>
        ...
    </TabPages>
</dx:BootstrapPageControl>

Auto PostBack

If the AutoPostBack property is set to true, the Page Control works in a “Server Mode”. In this mode, changing an active page causes a postback to refresh the entire web page.

<dx:BootstrapPageControl runat="server" AutoPostBack="true" OnActiveTabChanged="PageControlAutoPostBack_ActiveTabChanged">
    <TabPages>
        ...
    </TabPages>
</dx:BootstrapPageControl>

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

Client-Side Events

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

Trace Events:
<dx:BootstrapPageControl runat="server">
    <ClientSideEvents
        Init="onInit"
        TabClick="onTabClick"
        ActiveTabChanging="onActiveTabChanging"
        ActiveTabChanged="onActiveTabChanged" />
    <TabPages>
        ...
    </TabPages>
</dx:BootstrapPageControl>
Screen Size
Color Themes
Demo QR Code