All docs
V21.1
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery MultiView - Switch Between Views

By default, an end user can switch between views by swiping. Assign false to the swipeEnabled property to disable this feature.

jQuery
JavaScript
HTML
$(function() {
    $('#multiViewContainer').dxMultiView({
        // ...
        swipeEnabled: false
    });
});
<div id="multiViewContainer"></div>
Angular
HTML
TypeScript
<dx-multi-view
    [swipeEnabled]="false">
</dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMultiView
        :swipe-enabled="false"
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxMultiView
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

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

export default App;

You can switch the views from code by changing the selectedIndex or selectedItem property.

jQuery
JavaScript
HTML
$(function() {
    $("#multiViewContainer").dxMultiView("option", "selectedIndex", 1);
});
<div id="multiViewContainer"></div>
Angular
HTML
TypeScript
<dx-multi-view
    [dataSource]="multiViewItems"
    [(selectedIndex)]="selectedIndex">
</dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    selectedIndex: number;

    constructor() {
        this.selectedIndex = 1;
    }

    changeSelectedIndex(itemIndex) {
        this.selectedIndex = itemIndex;
    }

    multiViewItems = [
        { text: 'Personal Data' },
        { text: 'Contacts' }
    ];
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMultiView
        :data-source="multiViewItems"
        v-model:selected-index="selectedIndex" 
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxMultiView
    },
    data() {
        return {
            selectedIndex: 1,
            multiViewItems: [
                { text: 'Personal Data' },
                { text: 'Contacts' }
            ]
        };
    },
    methods: {
        changeSelectedIndex(itemIndex) {
            this.selectedIndex = itemIndex;
        }
    }
};
</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' }
];

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedIndex: 1
        }
    }

    handleOptionChange = (e) => {
        if(e.fullName === 'selectedIndex') {
            this.changeSelectedIndex(e.value);
        }
    }

    changeSelectedIndex = (itemIndex) => {
        this.setState({
            selectedIndex: itemIndex
        });
    }

    render() {
        return (
            <MultiView
                dataSource={multiViewItems}
                selectedIndex={this.state.selectedIndex}
                onOptionChanged={this.handleOptionChange}
            />
        );
    }
}

export default App;

By default, the MultiView UI component animates switching between views. You can disable animation by setting the animationEnabled property to false.

jQuery
JavaScript
HTML
$(function() {
    $('#multiViewContainer').dxMultiView({
        // ...
        animationEnabled: false
    });
});
<div id="multiViewContainer"></div>
Angular
HTML
TypeScript
<dx-multi-view
    [animationEnabled]="false">
</dx-multi-view>
import { DxMultiViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMultiView
        :animation-enabled="false"
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxMultiView
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

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

export default App;
See Also