Your search did not match any results.
Multi View


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.
Copy to Codepen
$(function(){ DevExpress.ui.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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="dx-theme" data-theme="generic.light" href="" /> <link rel="dx-theme" data-theme="android5.light" href="" /> <link rel="dx-theme" data-theme="ios7.default" href="" /> <link rel="dx-theme" data-theme="" href="" /> <link rel="dx-theme" data-theme="win10.white" href="" /> <script src=""></script> <script src="js/underscore-1.5.1.min.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> </div> <div id="multiview-container"></div> <div class="options"> <div class="options-header">Options:</div> <div> <div id="loop-enabled"></div> </div> <div> <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; } .options, #multiview > div:first-child { padding-left: 25px; } #multiview p { margin: 0; } #multiview h1 { font-size: 34px; } .options .dx-checkbox { margin-bottom: 5px; }
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": "" }];