JavaScript/jQuery MultiView - Customize Item Appearance

To customize views in the MultiView, define an itemTemplate.

JavaScript
HTML
  • var multiViewItems = [{
  • title: "Personal Data",
  • data: { firstName: "John", lastName: "Smith", birthYear: 1986 }
  • }, {
  • title: "Contacts",
  • data: { phone: "(555)555-5555", email: "John.Smith@example.com" }
  • }];
  •  
  • $(function() {
  • $("#multiViewContainer").dxMultiView({
  • dataSource: multiViewItems,
  • itemTemplate: function(itemData, itemIndex, itemElement) {
  • var container = $("<div style='margin:25px;'>");
  • container.append("<h1>" + itemData.title + "</h1>");
  •  
  • var info = $("<div style='text-align:left;'>");
  • for (var field in itemData.data) {
  • info.append("<p>" + field + ": <b>" + itemData.data[field] + "</b></p>");
  • }
  • container.append(info);
  • itemElement.append(container);
  • }
  • });
  • });
  • <div id="multiViewContainer"></div>

View Demo

You can also customize individual views. Declare the views as scripts and reference them in the template property or assign a customization function straight to this property:

JavaScript
HTML
  • $(function() {
  • $("#multiViewContainer").dxMultiView({
  • dataSource: [{
  • text: "Personal Data",
  • template: function() {
  • return $("<p>").text("This is Personal Data View");
  • }
  • }, {
  • text: "Contacts",
  • template: $("#individualTemplate")
  • }]
  • });
  • });
  • <div id="multiViewContainer"></div>
  • <script id="individualTemplate" type="text/html">
  • <p>This is Contacts View</p>
  • </script>
See Also