A newer version of this page is available. Switch to the current version.

Switch Between Views

By default, an end user can switch between views by swiping. Assign false to the swipeEnabled option 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.common.css';
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.common.css';
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 option.

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"
        :selected-index.sync="selectedIndex" 
    />
</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 {
            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.common.css';
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 widget animates switching between views. You can disable animation by setting the animationEnabled option 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.common.css';
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.common.css';
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