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