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" ng-model="alternateInvocation" dx-check-box="{
        text: 'invokeOnlyFromCode'
    }"></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: "invokeOnlyFromCode",
    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 an alternative invocation mode is enabled.

Type: Boolean
Default Value: false

If the option is set to true, the standard context menu invocation (on a right mouse click or on a long tap) is disabled, and the menu can be invoked 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.