DevExtreme jQuery - 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
Feedback