Unbound Mode

  • 2 minutes to read

In an Unbound Mode, TabControl is not bound to any data source and can be populated manually. To create nodes, use the MVCxTabCollection.Add methods.

View code (Razor):

@Html.DevExpress().TabControl(
    settings =>
    {
        settings.Name = "tcDataBinding";
        settings.Tabs.Add(
            tab => {
                tab.Name = "ASP.NET";
                tab.Text = "ASP.NET Controls";
                tab.TabImage.Url = "~/Content/TabImages/ASP.png";
                tab.ActiveTabImage.Url = "~/Content/TabImages/ASP_active.png";
                tab.NavigateUrl = "https://www.devexpress.com/Products/NET/Controls/ASP/";
            });
        settings.Tabs.Add(
            tab => {
                tab.Name = "WinForm";
                tab.Text = "WinForm Controls";
                tab.TabImage.Url = "~/Content/TabImages/Win.png";
                tab.ActiveTabImage.Url = "~/Content/TabImages/Win_active.png";
                tab.NavigateUrl = "https://www.devexpress.com/Products/NET/Controls/WinForms/";
            });
        settings.Tabs.Add(
            tab => {
                tab.Name = "VCL";
                tab.Text = "VCL Controls";
                tab.TabImage.Url = "~/Content/TabImages/VCL.png";
                tab.ActiveTabImage.Url = "~/Content/TabImages/VCL_active.png";
                tab.NavigateUrl = "https://www.devexpress.com/Products/VCL/";
            });
        settings.Tabs.Add(
            tab => {
                tab.Name = "WPF";
                tab.Text = "WPF Controls";
                tab.TabImage.Url = "~/Content/TabImages/WPF.png";
                tab.ActiveTabImage.Url = "~/Content/TabImages/WPF_active.png";
                tab.NavigateUrl = "https://www.devexpress.com/Products/NET/Controls/WPF/";
            });                        
        settings.Images.Tab.Width = 25;
        settings.Images.Tab.Height = 25;
        settings.Images.ActiveTab.Width = 30;
        settings.Images.ActiveTab.Height = 30;
        settings.Styles.Tab.Height = 35;
        }).GetHtml()

View code (ASPX):

<%
    Html.DevExpress().TabControl(
        settings =>
        {
            settings.Name = "tcDataBinding";
            settings.Tabs.Add(
                tab => {
                    tab.Name = "ASP.NET";
                    tab.Text = "ASP.NET Controls";
                    tab.TabImage.Url = "~/Content/TabImages/ASP.png";
                    tab.ActiveTabImage.Url = "~/Content/TabImages/ASP_active.png";
                    tab.NavigateUrl = "https://www.devexpress.com/Products/NET/Controls/ASP/";
                });
            settings.Tabs.Add(
                tab => {
                    tab.Name = "WinForm";
                    tab.Text = "WinForm Controls";
                    tab.TabImage.Url = "~/Content/TabImages/Win.png";
                    tab.ActiveTabImage.Url = "~/Content/TabImages/Win_active.png";
                    tab.NavigateUrl = "https://www.devexpress.com/Products/NET/Controls/WinForms/";
                });
            settings.Tabs.Add(
                tab => {
                    tab.Name = "VCL";
                    tab.Text = "VCL Controls";
                    tab.TabImage.Url = "~/Content/TabImages/VCL.png";
                    tab.ActiveTabImage.Url = "~/Content/TabImages/VCL_active.png";
                    tab.NavigateUrl = "https://www.devexpress.com/Products/VCL/";
                });
            settings.Tabs.Add(
                tab => {
                    tab.Name = "WPF";
                    tab.Text = "WPF Controls";
                    tab.TabImage.Url = "~/Content/TabImages/WPF.png";
                    tab.ActiveTabImage.Url = "~/Content/TabImages/WPF_active.png";
                    tab.NavigateUrl = "https://www.devexpress.com/Products/NET/Controls/WPF/";
                });                        
            settings.Images.Tab.Width = 25;
            settings.Images.Tab.Height = 25;
            settings.Images.ActiveTab.Width = 30;
            settings.Images.ActiveTab.Height = 30;
            settings.Styles.Tab.Height = 35;
            }).Render();
%>

The image below shows the result.

TabControl_Unbound