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.
