Your search did not match any results.

Overview

The TabPanel UI component consists of Tabs and MultiView components. The TabPanel automatically synchronizes the selected tab with the currently displayed view and vice versa.

Generate Similar Tabs Based on a Data Source

To generate similar tabs and views, bind the TabPanel to data. Use the items[] or dataSource property to do this. 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. However, 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. This demo illustrates the latter use case.

Create Individual Tabs

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.

Switch Between Tabs

To switch between tabs programmatically, use the selectedIndex property. It accepts the index of a tab in the dataSource or items[] array. The onSelectionChanged function allows you to perform the desired actions when the selected tab changes.

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.

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> <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; }