JavaScript/jQuery MultiView - Overview

The MultiView is a UI component that contains several views. An end user navigates through the views by swiping them in the horizontal direction. The UI component is often used along with the Tabs UI component.

View Demo

In the most simple case, the MultiView UI component requires only the dataSource property to be configured. Note that in such a case, data source items should have a structure described in the dataSource section. The following code adds the MultiView to your page.

jQuery
JavaScript
HTML
var multiViewItems = [
    { text: "Personal Data" },
    { text: "Contacts" },
    { text: "Address" }
];

$(function() {
    $("#multiViewContainer").dxMultiView({
        dataSource: multiViewItems
    });
});
<div id="multiViewContainer">
Angular
HTML
TypeScript
<x-multi-view
    [dataSource]="multiViewItems">
</dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    multiViewItems = [
        { text: 'Personal Data' },
        { text: 'Contacts' },
        { text: 'Address' }
    ];
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMultiView
        :data-source="multiViewItems"
    />
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxMultiView from 'devextreme-vue/multi-view';

export default {
    components: {
        DxMultiView
    },
    data() {
        return {
            multiViewItems: [
                { text: 'Personal Data' },
                { text: 'Contacts' },
                { text: 'Address' }
            ]
        };
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { MultiView } from 'devextreme-react/multi-view';

const multiViewItems = [
    { text: 'Personal Data' },
    { text: 'Contacts' },
    { text: 'Address' }
];

class App extends React.Component {
    render() {
        return (
            <MultiView
                dataSource={multiViewItems}
            />
        );
    }
}

export default App;

More often, structure of the data source item differs from the default. For correct rendering of views, specify a custom template.

See Also