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
@{
var tabsPositions = new[] {
"left",
"top",
"right",
"bottom"
};
var stylingModes = new[] {
"secondary",
"primary"
};
var iconPositions = new[] {
"top",
"start",
"end",
"bottom"
};
}
<div class="tabpanel-demo">
<div class="widget-container">
@(Html.DevExtreme().TabPanel()
.ID("tabpanel")
.DataSource(d => d.Mvc().LoadAction("GetTabPanelItems"))
.Width("100%")
.Height(418)
.AnimationEnabled(true)
.SwipeEnabled(true)
.TabsPosition(Position.Left)
.StylingMode(TabsStyle.Secondary)
.IconPosition(TabsIconPosition.Top)
.ItemTemplate(new JS("tabPanelTemplate"))
)
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div class="option-label">Tab position</div>
@(Html.DevExtreme().SelectBox()
.DataSource(tabsPositions)
.Value("left")
.InputAttr("aria-label", "Tab position")
.OnValueChanged("tabsPositionChanged")
)
</div>
<div class="option">
<div class="option-label">Styling mode</div>
@(Html.DevExtreme().SelectBox()
.DataSource(stylingModes)
.Value("secondary")
.InputAttr("aria-label", "Styling mode")
.OnValueChanged("stylingModeChanged")
)
</div>
<div class="option">
<div class="option-label">Icon position</div>
@(Html.DevExtreme().SelectBox()
.DataSource(iconPositions)
.Value("top")
.InputAttr("aria-label", "Icon positions")
.OnValueChanged("iconPositionChanged")
)
</div>
</div>
</div>
<script>
const taskItem = (task) => {
const className = `task-item task-item-priority-${task.priority}`;
return `
<div class="${className}">
<span class="task-item-text">
${task.text}
</span>
<span class="task-item-info">
${task.date} by ${task.assignedBy}
</span>
<i class="task-item-pseudo-button dx-icon dx-icon-overflow"></i>
</div>
`;
};
const taskList = (tasks) => {
const list = tasks.reduce((accumulator, task) => `${accumulator} ${taskItem(task)}`, '');
return `
<div class="tabpanel-item">
${list}
</div>
`;
};
function tabPanelTemplate({ tasks }) {
return taskList(tasks)
}
function getTabPanelInstance() {
return $("#tabpanel").dxTabPanel("instance");
}
function tabsPositionChanged({ value }) {
getTabPanelInstance().option({ tabsPosition: value });
}
function stylingModeChanged({ value }) {
getTabPanelInstance().option({ stylingMode: value });
}
function iconPositionChanged({ value }) {
getTabPanelInstance().option({ iconPosition: value });
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class TabPanelController : Controller {
public ActionResult Overview() {
return View();
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.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
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class TabPanelItem {
public string icon { get; set; }
public string title { get; set; }
public IEnumerable<TaskItem> tasks { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class TaskItem {
public string status { get; set; }
public string priority { get; set; }
public string text { get; set; }
public string date { get; set; }
public string assignedBy { get; set; }
}
}
.tabpanel-demo {
display: flex;
height: 100%;
}
.widget-container {
display: flex;
justify-content: center;
flex-grow: 1;
min-width: 360px;
padding: 16px 32px;
}
.tabpanel-demo .dx-tabpanel {
background-color: var(--dx-component-color-bg);
}
.dx-theme-material .widget-container {
background-color: rgba(191, 191, 191, 0.15);
}
.dx-tabpanel-tabs-position-left .dx-tabpanel-container,
.dx-tabpanel-tabs-position-right .dx-tabpanel-container {
width: 0;
}
.dx-viewport:not(.dx-theme-generic) .dx-tabpanel {
border-radius: 8px;
overflow: clip;
}
.dx-tabs-vertical {
min-width: 120px;
}
.options {
display: inline-flex;
flex-direction: column;
flex-shrink: 0;
box-sizing: border-box;
width: 272px;
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 20px;
}
.tabpanel-item {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
}
.task-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 50px;
padding: 8px 12px 8px 8px;
border-radius: 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
}
.task-item::before {
content: "";
position: absolute;
top: 8px;
left: 6px;
bottom: 8px;
width: 3px;
border-radius: 4px;
}
.task-item-priority-high::before {
background-color: #e1bee7;
}
.task-item-priority-medium::before {
background-color: #ffe0b2;
}
.task-item-priority-low::before {
background-color: #c8e6c9;
}
.task-item-text,
.task-item-info {
margin: 0;
padding: 0 24px 0 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-item-info {
font-size: 12px;
opacity: 0.6;
}
.task-item-pseudo-button {
position: absolute;
right: 8px;
top: 50%;
font-size: 18px;
transform: translateY(-50%);
cursor: pointer;
opacity: 0.6;
}
.dx-color-scheme-contrast .task-item {
border: 1px solid #fff;
}
.dx-theme-fluent.dx-color-scheme-blue-dark .task-item {
background-color: #1f1f1f;
}
Generate Similar Tabs Based on a Data Source
To generate similar tabs and views, bind the TabPanel to data (using the items or dataSource property). Both these properties can work with local arrays, but dataSource also accepts a DataSource object. You can use this object if you need to process the local array or fetch the array from a remote data source. In this demo, the dataSource property is set to a local array.
Each object in the items[] or dataSource array can contain predefined fields, such as title or icon (see the items[] section for the full list). The TabPanel automatically recognizes these fields and creates the default tab and view appearance based on them.
Customize Tab Contents and Appearance
You can initialize tab contents (text, icons and badges) with values from underlying data objects.
Use the drop-down editors on the right to change tab position, styling mode, and icon position.