Your search did not match any results.
Documentation

The MultiView widget contains several views and allows an end user to switch between them. In this demo, all views are defined using a custom template. You can navigate through the views by swiping them in the horizontal direction.

@model List<DevExtreme.NETCore.Demos.Models.Store> <div id="multiview"> <div> Item <span class="selected-index">1</span> of <span class="item-count">@Model.Count</span> </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"> <h1><%= CompanyName %></h1> <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 List<Store> Stores = new List<Store> { 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.com" }, 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.com" }, 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.com" }, 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.com" } }; } }
#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 { margin: 0; } #multiview h1 { font-size: 34px; } .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; }