DevExtreme jQuery - Open and Close the Menu Using the API
To open or close the SlideOutView menu programmatically, call the showMenu() or hideMenu() method. You can do the same thing using the toggleMenuVisibility() method. Pass true or false to this method to open or close the menu, respectively. For example, the following code shows how to open the slide-out menu when a user clicks the Menu button on the Toolbar (see the onClick function).
<div id="slideOutView"> <div data-options="dxTemplate: { name: 'content' }"> <div id="toolbar"></div> ... </div> <div data-options="dxTemplate: { name: 'menu' }"> ... </div> </div>
$(function() { $("#slideOutView").dxSlideOutView({ menuTemplate: 'menu', contentTemplate: 'content' }); $("#toolbar").dxToolbar({ dataSource: [{ widget: 'dxButton', options: { icon: 'menu', onClick: function (e) { $("#slideOutView").dxSlideOutView("showMenu"); // ---------- or ---------- $("#slideOutView").dxSlideOutView("toggleMenuVisibility", true); } }, location: 'before' }, { text: 'Title', location: 'center' }] }); // ... });
#slideOutView { height: auto; position: absolute; top: 0; bottom: 0; width: 100%; }
When using AngularJS or Knockout, you can still call the methods mentioned before, but as an alternative, you can bind the menuVisible property of the SlideOutView widget to a scope property (in AngularJS) or an observable variable (in Knockout). After that, change this scope property or observable variable, and the slide-out menu will be opened or closed.
AngularJS
<div ng-controller="DemoController"> <div id="slideOutView" dx-slide-out-view="{ menuTemplate: 'menu', contentTemplate: 'content', bindingOptions: { menuVisible: 'isMenuVisible' } }"> <div data-options="dxTemplate: { name: 'content' }"> <div dx-toolbar="{ dataSource: [{ widget: 'dxButton', options: { icon: 'menu', onClick: showMenu }, location: 'before' }, { text: 'Title', location: 'center' }] }"></div> <!-- ... --> </div> <div data-options="dxTemplate: { name: 'menu' }"> <!-- ... --> </div> </div> </div>
angular.module('DemoApp', ['dx']) .controller('DemoController', function DemoController($scope) { $scope.isMenuVisible = false; $scope.showMenu = function () { $scope.isMenuVisible = true; }; });
Knockout
<div id="slideOutView" data-bind="dxSlideOutView: { menuTemplate: 'menu', contentTemplate: 'content', menuVisible: isMenuVisible }"> <div data-options="dxTemplate: { name: 'content' }"> <div data-bind="dxToolbar: { dataSource: [{ widget: 'dxButton', options: { icon: 'menu', onClick: function (e) { $data.isMenuVisible(true); } }, location: 'before' }, { text: 'Title', location: 'center' }] }"></div> ... </div> <div data-options="dxTemplate: { name: 'menu' }"> <!-- ... --> </div> </div>
var viewModel= { isMenuVisible: ko.observable(false) }; ko.applyBindings(viewModel);
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.