Skip to main content

TabControl

TabControl represents a navigation control made up of multiple tabs. It can be used to create tabbed interfaces that allow end-users to navigate through different pages.

To learn more about TabControl and see it in action, refer to its online demos.

#Implementation Details

TabControl is realized by the TabControlExtension class. Its instance can be accessed via the ExtensionsFactory.TabControl helper method, which is used to add a TabControl extension to a view. This method’s parameter provides access to the TabControl‘s settings implemented by the TabControlSettings class, allowing you to fully customize the extension.

TabControl‘s client counterpart is represented by the ASPxClientTabControl object.

#Declaration

TabControl can be added to a view in the following manner.

View code (ASPX):

<% 
    Html.DevExpress().TabControl(
        settings =>
        {
            settings.Name = "tabControl";

            settings.Width = 300;
            settings.Height = 100;

            settings.Tabs.Add("Tab1", "Tab1", "");
            settings.Tabs.Add("Tab2", "Tab2", "");
            settings.Tabs.Add("Tab3", "Tab3", "");
        })
        .Render();
%>

View code (Razor):

@Html.DevExpress().TabControl(
    settings =>
    {
        settings.Name = "tabControl";

        settings.Width = 300;
        settings.Height = 100;

        settings.Tabs.Add("Tab1", "Tab1", "");
        settings.Tabs.Add("Tab2", "Tab2", "");
        settings.Tabs.Add("Tab3", "Tab3", "");
    }).GetHtml()

Note

The Partial View should contain only the extension’s code.

The result of the code is demonstrated by the image below.

tabcontrol-declaration.png