Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@model IEnumerable<DevExtreme.MVC.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.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 MultiViewController : Controller {
public ActionResult Overview() {
return View(SampleData.Stores);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.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;
namespace DevExtreme.MVC.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.