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
$(function() {
    $("#multiViewContainer").dxMultiView({
        dataSource: multiViewItems,
        swipeEnabled: false
    });
});
Angular
HTML
TypeScript
<dx-multi-view
    [dataSource]="multiViewItems"
    [swipeEnabled]="false">
</dx-multi-view>
import { DxMultiViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    multiViewItems = [ ... ];
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})

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

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

By default, the MultiView widget animates switching between views. You can disable animation by setting the animationEnabled option to false.

jQuery
JavaScript
$(function() {
    $("#multiViewContainer").dxMultiView({
        dataSource: multiViewItems,
        animationEnabled: false
    });
});
Angular
HTML
TypeScript
<dx-multi-view
    [dataSource]="multiViewItems"
    [animationEnabled]="false">
</dx-multi-view>
import { DxMultiViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    multiViewItems = [ ... ];
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})
See Also