@(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>
<b><%- City %></b>
(<span><%- State %></span>)
</p>
<p>
<span><%- ZipCode %></span>
<span><%- Address %></span>
</p>
</div>
<div>
<p>Phone: <b><%- Phone %></b></p>
<p>Fax: <b><%- Fax %></b></p>
<p>
Website:
<a href="<%- Website %>" 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 Overview() {
return View();
}
public ActionResult SortableClosableTabs() {
return View(SampleData.DataGridEmployees);
}
[HttpGet]
public object GetCompanies(DataSourceLoadOptions loadOptions) {
return DataSourceLoader.Load(TabPanelData.Companies, loadOptions);
}
}
}
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.com"
},
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.com"
},
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.com"
},
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.com"
}
};
}
}
.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;
}