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.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.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.

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery MultiView - Overview

jQuery

Angular

Vue

React

See Also