Your search did not match any results.

Multi View

The MultiView component contains multiple views and allows users to switch between them. In this demo, swipe left or right to navigate through the views.

You can create view items in the items array, or load them from a dataSource. If you specify the dataSource structure as described in the items API section, the dataSource populates the component with view items. Otherwise, you need to specify an itemTemplate. This demo shows how to implement the latter scenario.

Backend API
@model IEnumerable<DevExtreme.NETCore.Demos.Models.Store> <div id="multiview"> <div> Item <span class="selected-index">1</span> of <span class="item-count">@Model.Count()</span>: <i>Swipe the view horizontally to switch to the next view.</i> </div> @(Html.DevExtreme().MultiView() .ID("multiview-container") .Height(300) .DataSource(Model) .SelectedIndex(0) .Loop(false) .AnimationEnabled(true) .OnSelectionChanged("multiView_selectionChanged") .ItemTemplate(@<text> <div class="multiview-item"> <div class="header"><%- CompanyName %></div> <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>) ) <div class="options"> <div class="caption">Options</div> <div class="option"> @(Html.DevExtreme().CheckBox() .ID("loop-enabled") .Value(false) .Text("Loop enabled") .OnValueChanged("checkBoxLoopEnabled_valueChanged") ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .ID("animation-enabled") .Value(true) .Text("Animation enabled") .OnValueChanged("checkBoxAnimationEnabled_valueChanged") ) </div> </div> </div> <script> function multiView_selectionChanged(e) { $(".selected-index") .text(e.component.option("selectedIndex") + 1); } function checkBoxLoopEnabled_valueChanged(e) { var multiView = $("#multiview-container").dxMultiView("instance"); multiView.option("loop", e.value); } function checkBoxAnimationEnabled_valueChanged(e) { var multiView = $("#multiview-container").dxMultiView("instance"); multiView.option("animationEnabled", e.value); } </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class MultiViewController : Controller { public ActionResult Overview() { return View(SampleData.Stores); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class Store { public int ID { get; set; } public string CompanyName { 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 partial class SampleData { public static readonly IEnumerable<Store> Stores = new[] { new Store { ID = 1, CompanyName = "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 Store { ID = 2, CompanyName = "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 Store { ID = 3, CompanyName = "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 Store { ID = 4, CompanyName = "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" } }; } }
#multiview { margin-top: 25px; } .multiview-item { margin:25px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; padding: 20px 0 30px; } .multiview-item > div { padding-top: 20px; } #multiview > div:first-child { padding-left: 25px; } #multiview p, #multiview .header { margin: 0; } #multiview .header { font-size: 34px; padding-top: 0; } .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; }

If you want users to scroll back to the first item after they swipe the last item, set the loop property to true. Specify the animationEnabled property to enable or disable the scroll animation.