jQuery MultiView - Customize Item Appearance
To customize views in the MultiView, define an itemTemplate.
jQuery
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>
Angular
HTML
TypeScript
<dx-multi-view
[dataSource]="multiViewItems"
itemTemplate="item">
<div *dxTemplate="let content of 'item'">
<div style="margin: 25px;">
<h1>{{content.title}}</h1>
<div style="text-align: left;">
<p *ngFor="let key of getItemKeys(content.data)">
{{key}}: <b>{{content.data[key]}}</b>
</p>
</div>
</div>
</div>
</dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
multiViewItems = [{
title: 'Personal Data',
data: { firstName: 'John', lastName: 'Smith', birthYear: 1986 }
}, {
title: 'Contacts',
data: { phone: '(555)555-5555', email: 'John.Smith@example.com' }
}];
getItemKeys (item) {
return Object.keys(item);
}
}
@NgModule({
imports: [
// ...
DxMultiViewModule
],
// ...
})Vue
App.vue
<template>
<DxMultiView
:data-source="multiViewItems"
item-template="item">
<template #item="{ data }">
<div :style="{ margin: '25px' }">
<h1>{{data.title}}</h1>
<div :style="{ textAlign: 'left' }">
<p v-for="key in getItemKeys(data.data)">
{{key}}: <b>{{data.data[key]}}</b>
</p>
</div>
</div>
</template>
</DxMultiView>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxMultiView from 'devextreme-vue/multi-view';
export default {
components: {
DxMultiView
},
data() {
return {
multiViewItems: [{
title: 'Personal Data',
data: { firstName: 'John', lastName: 'Smith', birthYear: 1986 }
}, {
title: 'Contacts',
data: { phone: '(555)555-5555', email: 'John.Smith@example.com' }
}]
};
},
methods: {
getItemKeys: function(item) {
return Object.keys(item);
}
}
};
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { MultiView } from 'devextreme-react/multi-view';
const multiViewItems = [{
title: 'Personal Data',
data: { firstName: 'John', lastName: 'Smith', birthYear: 1986 }
}, {
title: 'Contacts',
data: { phone: '(555)555-5555', email: 'John.Smith@example.com' }
}];
class App extends React.Component {
render() {
return (
<MultiView
dataSource={multiViewItems}
itemRender={this.renderItem}
/>
);
}
renderItem(content) {
return (
<div style={{ margin: 25 }}>
<h1>{content.title}</h1>
<div style={{ textAlign: 'left' }}>
{
Object.keys(content.data).map(key => {
return (
<p key={key}>
{key}: <b>{content.data[key]}</b>
</p>
)}
)
}
</div>
</div>
);
}
}
export default App;Angular
You can also customize individual views. Declare them using the dxItem component:
HTML
TypeScript
<dx-multi-view>
<dxi-item text="Personal Data"></dxi-item>
<dxi-item text="Contacts"></dxi-item>
</dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxMultiViewModule
],
// ...
})Vue
You can also customize individual views. Declare them using the dxItem component:
App.vue
<template>
<DxMultiView>
<DxItem text="Personal Data" />
<DxItem text="Contacts" />
</DxMultiView>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxMultiView, { DxItem } from 'devextreme-vue/multi-view';
export default {
components: {
DxMultiView,
DxItem
}
};
</script>React
You can also customize individual views. Declare them using the dxItem component:
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { MultiView, Item } from 'devextreme-react/multi-view';
class App extends React.Component {
render() {
return (
<MultiView>
<Item text="Personal Data"/>
<Item text="Contacts"/>
</MultiView>
);
}
}
export default App;jQuery
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
Feedback