Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@(Html.DevExtreme().TabPanel()
.ID("tabpanel-container")
.Height(260)
.DataSource(d => d.Mvc().LoadAction("GetCompanies"))
.SelectedIndex(0)
.Loop(false)
.AnimationEnabled(true)
.SwipeEnabled(true)
.ItemTitleTemplate(@<text><span><%- Name %></span></text>)
.ItemTemplate(@<text>
<div class="tabpanel-item">
<div>
<p>
<span><%- Address %></span>
</p>
<p>
<span><b><%- City %></b>,</span>
<span><%- State %></span>
<span><%- ZipCode %></span>
</p>
</div>
<div>
<p>Phone: <b><%- Phone %></b></p>
<p>Fax: <b><%- Fax %></b></p>
<p>
Website:
<a href="<%- Website %>" rel="noreferrer" target="_blank"><%- Website %></a>
</p>
</div>
</div>
</text>)
.OnSelectionChanged("tabPanelSelection_changed")
)
<div class="item-box">
Item <span class="selected-index">1</span>
of <span>4</span>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(false)
.Text("Loop enabled")
.OnValueChanged("loopEnabled")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(true)
.Text("Animation enabled")
.OnValueChanged("animationEnabled")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(true)
.Text("Swipe enabled")
.OnValueChanged("swipeEnabled")
)
</div>
</div>
<script>
function tabPanelSelection_changed(e) {
$(".selected-index")
.text(e.component.option("selectedIndex") + 1);
}
function getTabPanelInstance() {
return $("#tabpanel-container").dxTabPanel("instance");
}
function loopEnabled(e) {
getTabPanelInstance().option("loop", e.value);
}
function animationEnabled(e) {
getTabPanelInstance().option("animationEnabled", e.value);
}
function swipeEnabled(e) {
getTabPanelInstance().option("swipeEnabled", e.value);
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using System.Text.Json;
namespace DevExtreme.NETCore.Demos.Controllers {
public class TabPanelController : Controller {
public ActionResult Templates() {
return View();
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models {
public class Company {
public int ID { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string State { get; set; }
public int ZipCode { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
public string Website { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public static class TabPanelData {
public static readonly IEnumerable<Company> Companies = new[] {
new Company {
ID = 1,
Name = "SuprMart",
Address = "702 SW 8th Street",
City = "Bentonville",
State = "Arkansas",
ZipCode = 72716,
Phone = "(800) 555-2797",
Fax = "(800) 555-2171",
Website = "http://www.nowebsitesupermart.dx"
},
new Company {
ID = 2,
Name = "El'Depot",
Address = "2455 Paces Ferry Road NW",
City = "Atlanta",
State = "Georgia",
ZipCode = 30339,
Phone = "(800) 595-3232",
Fax = "(800) 595-3231",
Website = "http://www.nowebsitedepot.dx"
},
new Company {
ID = 3,
Name = "K&S Music",
Address = "1000 Nicllet Mall",
City = "Minneapolis",
State = "Minnesota",
ZipCode = 55403,
Phone = "(612) 304-6073",
Fax = "(612) 304-6074",
Website = "http://www.nowebsitemusic.dx"
},
new Company {
ID = 4,
Name = "Tom Club",
Address = "999 Lake Drive",
City = "Issaquah",
State = "Washington",
ZipCode = 98027,
Phone = "(800) 955-2292",
Fax = "(800) 955-2293",
Website = "http://www.nowebsitetomsclub.dx"
}
};
public static readonly IEnumerable<TaskItem> NotStartedTaskItems = new[] {
new TaskItem {
status = "Not Started",
priority = "high",
text = "Revenue Projections",
date = "2023/09/16",
assignedBy = "John Heart"
},
new TaskItem {
status = "Not Started",
priority = "high",
text = "New Brochures",
date = "2023/09/16",
assignedBy = "Samantha Bright"
},
new TaskItem {
status = "Not Started",
priority = "medium",
text = "Training",
date = "2023/09/16",
assignedBy = "Arthur Miller"
},
new TaskItem {
status = "Not Started",
priority = "medium",
text = "NDA",
date = "2023/09/16",
assignedBy = "Robert Reagan"
},
new TaskItem {
status = "Not Started",
priority = "low",
text = "Health Insurance",
date = "2023/09/16",
assignedBy = "Greta Sims"
}
};
public static readonly IEnumerable<TaskItem> HelpNeededTaskItems = new[] {
new TaskItem {
status = "Help Needed",
priority = "low",
text = "TV Recall",
date = "2023/09/16",
assignedBy = "Brett Wade"
},
new TaskItem {
status = "Help Needed",
priority = "low",
text = "Recall and Refund Forms",
date = "2023/09/16",
assignedBy = "Sandra Johnson"
},
new TaskItem {
status = "Help Needed",
priority = "high",
text = "Shippers",
date = "2023/09/16",
assignedBy = "Ed Holmes"
},
new TaskItem {
status = "Help Needed",
priority = "medium",
text = "Hardware Upgrade",
date = "2023/09/16",
assignedBy = "Barb Banks"
}
};
public static readonly IEnumerable<TaskItem> InProgressTaskItems = new[] {
new TaskItem {
status = "In Progress",
priority = "medium",
text = "Online Sales",
date = "2023/09/16",
assignedBy = "Cindy Stanwick"
},
new TaskItem {
status = "In Progress",
priority = "medium",
text = "New Website Design",
date = "2023/09/16",
assignedBy = "Sammy Hill"
},
new TaskItem {
status = "In Progress",
priority = "low",
text = "Bandwidth Increase",
date = "2023/09/16",
assignedBy = "Davey Jones"
},
new TaskItem {
status = "In Progress",
priority = "medium",
text = "Support",
date = "2023/09/16",
assignedBy = "Victor Norris"
},
new TaskItem {
status = "In Progress",
priority = "low",
text = "Training Material",
date = "2023/09/16",
assignedBy = "John Heart"
}
};
public static readonly IEnumerable<TaskItem> DeferredTaskItems = new[] {
new TaskItem {
status = "Deferred",
priority = "medium",
text = "New Database",
date = "2023/09/16",
assignedBy = "Samantha Bright"
},
new TaskItem {
status = "Deferred",
priority = "high",
text = "Automation Server",
date = "2023/09/16",
assignedBy = "Arthur Miller"
},
new TaskItem {
status = "Deferred",
priority = "medium",
text = "Retail Sales",
date = "2023/09/16",
assignedBy = "Robert Reagan"
},
new TaskItem {
status = "Deferred",
priority = "medium",
text = "Shipping Labels",
date = "2023/09/16",
assignedBy = "Greta Sims"
}
};
public static readonly IEnumerable<TaskItem> RejectedTaskItems = new[] {
new TaskItem {
status = "Rejected",
priority = "high",
text = "Schedule Meeting with Sales Team",
date = "2023/09/16",
assignedBy = "Sandra Johnson"
},
new TaskItem {
status = "Rejected",
priority = "medium",
text = "Confirm Availability for Sales Meeting",
date = "2023/09/16",
assignedBy = "Ed Holmes"
},
new TaskItem {
status = "Rejected",
priority = "medium",
text = "Reschedule Sales Team Meeting",
date = "2023/09/16",
assignedBy = "Barb Banks"
},
new TaskItem {
status = "Rejected",
priority = "high",
text = "Update Database with New Leads",
date = "2023/09/16",
assignedBy = "Kevin Carter"
},
new TaskItem {
status = "Rejected",
priority = "low",
text = "Send Territory Sales Breakdown",
date = "2023/09/16",
assignedBy = "Cindy Stanwick"
}
};
public static readonly IEnumerable<TaskItem> CompletedTaskItems = new[] {
new TaskItem {
status = "Completed",
priority = "medium",
text = "Territory Sales Breakdown Report",
date = "2023/09/16",
assignedBy = "Sammy Hill"
},
new TaskItem {
status = "Completed",
priority = "low",
text = "Return Merchandise Report",
date = "2023/09/16",
assignedBy = "Davey Jones"
},
new TaskItem {
status = "Completed",
priority = "high",
text = "Staff Productivity Report",
date = "2023/09/16",
assignedBy = "Victor Norris"
},
new TaskItem {
status = "Completed",
priority = "medium",
text = "Review HR Budget Company Wide",
date = "2023/09/16",
assignedBy = "Mary Stern"
}
};
public static readonly IEnumerable<TabPanelItem> TabPanelItems = new[] {
new TabPanelItem {
icon = "description",
title = "Not Started",
tasks = NotStartedTaskItems
},
new TabPanelItem {
icon = "taskhelpneeded",
title = "Help Needed",
tasks = HelpNeededTaskItems
},
new TabPanelItem {
icon = "taskinprogress",
title = "In Progress",
tasks = InProgressTaskItems
},
new TabPanelItem {
icon = "taskstop",
title = "Deferred",
tasks = DeferredTaskItems
},
new TabPanelItem {
icon = "taskrejected",
title = "Rejected",
tasks = RejectedTaskItems
},
new TabPanelItem {
icon = "taskcomplete",
title = "Completed",
tasks = CompletedTaskItems
}
};
}
}
.tabpanel-item {
height: 200px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-left: 25px;
padding-top: 55px;
}
.mobile .tabpanel-item {
padding-top: 10px;
}
.tabpanel-item > div {
float: left;
padding: 0 85px 10px 10px
}
.tabpanel-item p {
font-size: 16px;
margin: 0;
}
.item-box {
font-size: 16px;
margin: 15px 0 45px 10px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
If you want each tab and view to have differently structured content, define individual templates. To do this, assign an array of objects to the items[] or dataSource property and specify the tabTemplate and template properties in each object. This use case is illustrated in the following tutorial: Getting Started with TabPanel.
Use the following properties to configure user navigation between tabs:
-
swipeEnabled
Defines whether to switch between views with a swipe gesture. -
loop
Specifies whether to loop views. -
animationEnabled
Specifies whether to animate transition between views.
You can switch the checkboxes below the TabPanel to change the loop, animationEnabled, and swipeEnabled property values.