Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Your search did not match any results.
Multi View

Multi View


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.

Copy to CodePen
$(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=""> <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=""></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="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></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": "" }, { "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": "" }, { "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": "" }, { "ID": 4, "CompanyName": "Tom Club", "Address": "999 Lake Drive", "City": "Issaquah", "State": "Washington", "Zipcode": 98027, "Phone": "(800) 955-2292", "Fax": "(800) 955-2293", "Website": "" }];