Templates
This demo illustrates the use of templates in TabPanel. If your data objects contain custom fields, you need to specify the itemTitleTemplate and itemTemplate that define how to display the fields in tabs and views.
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.
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 Newtonsoft.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;
}