Your search did not match any results.
TabPanel

Tab Panel

Documentation
The TabPanel is a widget consisting of the Tabs and the MultiView widgets. It automatically synchronizes the selected tab with the currently displayed view and vice versa. In this demo, the appearance of views and tabs is defined by custom templates.
@(Html.DevExtreme().TabPanel() .ID("tabpanel-container") .Height(260) .DataSource(d => d.Mvc().Controller("TabPanel").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.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(); } [HttpGet] public ActionResult GetCompanies(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(TabPanelData.Companies, loadOptions)), "application/json"); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.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; using System.Web; namespace DevExtreme.MVC.Demos.Models.SampleData { public static class TabPanelData { public static List<Company> Companies = new List<Company> { 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; } .item-box { font-size: 16px; margin: 15px 0 45px 10px; } .options { padding: 20px; background-color: #f5f5f5; margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; }