Vue 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;

View Demo

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