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

HTML
JavaScript
CSS
<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
HTML
JavaScript
<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
HTML
JavaScript
<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