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