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>
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
Feel free to share topic-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.