Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Multi View
Documentation
The MultiView UI component 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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(function(){
DevExpress.setTemplateEngine("underscore");
var multiView = $("#multiview-container").dxMultiView({
height: 300,
dataSource: multiViewItems,
selectedIndex: 0,
loop: false,
animationEnabled: true,
itemTemplate: $("#customer"),
onSelectionChanged: function(e) {
$(".selected-index")
.text(e.component.option("selectedIndex") + 1);
}
}).dxMultiView("instance");
$("#loop-enabled").dxCheckBox({
value: false,
text: "Loop enabled",
onValueChanged: function(e) {
multiView.option("loop", e.value);
}
});
$("#animation-enabled").dxCheckBox({
value: true,
text: "Animation enabled",
onValueChanged: function(e) {
multiView.option("animationEnabled", e.value);
}
});
$(".item-count").text(multiViewItems.length);
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>
<script src="js/underscore.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="multiview">
<div>
Item <span class="selected-index">1</span>
of <span class="item-count"></span>:
<i>Swipe the view horizontally to switch to the next view.</i>
</div>
<div id="multiview-container"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div id="loop-enabled"></div>
</div>
<div class="option">
<div id="animation-enabled"></div>
</div>
</div>
</div>
<script type="text/html" id="customer">
<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>
</script>
</div>
</body>
</html>
#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 h1 {
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;
}
var multiViewItems = [{
"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"
}, {
"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"
}, {
"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"
}, {
"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"
}];