Configuration alternativeInvocationMode

Holds an object that specifies options of alternative menu invocation.

Type: Object
Default Value: { enabled: false, invokingElement: null }

Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="ui-element" dx-check-box="{
        text: 'Show context menu',
        bindingOptions: {
            value: 'alternateInvocation'
        }
    }"></div><br />
    <div id="invokeButton" dx-button="{
        text: 'Show context menu',
        bindingOptions: {
            visible: 'alternateInvocation'
        }
    }"></div>
    <div class="target" id="contextMenuTarget"></div>
    <div dx-context-menu="{
        dataSource: menuItems,
        target: '#contextMenuTarget',
        alternativeInvocationMode: {
            invokingElement: '#invokeButton'
        },
        bindingOptions: {
            'alternativeInvocationMode.enabled': 'alternateInvocation',
        }
    }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.menuItems = [
        { text: 'Increase' },
        {
            text: 'Share',
            items: [
                { text: 'Send to a friend' },
                { text: 'Send to a group' }]
        },
        { text: 'Download' },
        { text: 'Comment' },
        { text: 'Favorite' }
    ];
    $scope.alternateInvocation = false;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.demo-page{
    background-color: #F0F0F0;
    height: 400px;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.ui-element{
    margin-bottom: 10px;
}

.target {
    background-image: url(/Content/images/doc/14_2/PhoneJS/cherry.jpg);
    background-size: cover;
    height: 150px; 
    width:100px; 
}

#invokeButton{
    margin-bottom: 15px;
}
<div class="demo-page">
    <div class="ui-element" data-bind="dxCheckBox: { value: alternateInvocation, text: 'invokeOnlyFromCode' }"></div><br />
    <div id="invokeButton" data-bind="dxButton: {
        text: 'Show context menu',
        visible: alternateInvocation
    }"></div>
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: {
        dataSource: menuItems,
        target: '#contextMenuTarget',
        alternativeInvocationMode: {
            enabled: alternateInvocation,
            invokingElement: '#invokeButton'
        }
    }"></div>
</div>
var myViewModel = {
    menuItems: [
        { text: 'Increase' },
        {
            text: 'Share',
            items: [
                { text: 'Send to a friend' },
                { text: 'Send to a group' }]
        },
        { text: 'Download' },
        { text: 'Comment' },
        { text: 'Favorite' }
    ],
    alternateInvocation: ko.observable(false)
};
ko.applyBindings(myViewModel);
.demo-page{
    background-color: #F0F0F0;
    height: 400px;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.ui-element{
    margin-bottom: 10px;
}

.target {
    background-image: url(/Content/images/doc/14_2/PhoneJS/cherry.jpg);
    background-size: cover;
    height: 150px; 
    width:100px; 
}

#invokeButton{
    margin-bottom: 15px;
}
<div class="demo-page">
    <div class="ui-element" id="invocationSelector"></div><br />
    <div id="invokeButton"></div>
    <div class="target" id="contextMenuTarget"></div>
    <div id="myContextMenu"></div>
</div>
$("#myContextMenu").dxContextMenu({
    dataSource: [
        { text: 'Increase' },
        {
            text: 'Share',
            items: [
                { text: 'Send to a friend' },
                { text: 'Send to a group' }]
        },
        { text: 'Download' },
        { text: 'Comment' },
        { text: 'Favorite' }
    ],
    target: '#contextMenuTarget',
    alternativeInvocationMode: {
        enabled: false,
        invokingElement: "#invokeButton"
    }
});
$("#invokeButton").dxButton({
    text: "Show context menu",
    visible: false
});
$("#invocationSelector").dxCheckBox({
    value: false,
    text: "alternateInvocation.enabled",
    onValueChanged: function (e) {
        $("#myContextMenu").dxContextMenu("instance").option("alternativeInvocationMode.enabled", e.value);
        $("#invokeButton").dxButton("instance").option("visible", e.value);
    }
});
.demo-page{
    background-color: #F0F0F0;
    height: 400px;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.ui-element{
    margin-bottom: 10px;
}

.target {
    background-image: url(/Content/images/doc/14_2/PhoneJS/cherry.jpg);
    background-size: cover;
    height: 150px; 
    width:100px; 
}

#invokeButton{
    margin-bottom: 15px;
}

enabled

Specifies whether or not the standard context menu invocation (on a right mouse click or on a long tap) is disabled.

Type: Boolean
Default Value: false

If the option is set to true, the menu can be invoked using the show method, or on an invoking element click.

invokingElement

Specifies the element used to invoke the context menu.

Default Value: false

If this option is defined, the context menu is invoked on the specified element click.

This option can take on one of the following values.

JavaScript
//CSS selector
invokingElement: '#myElement';

//jQuery wrapper
invokingElement: $('#myElement');

//DOM element
invokingElement: document.getElementById('myElement');

The option makes sense only if the enabled option is set to true.