TabControl

• Jul 09, 2021

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

C#

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

C#

@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.