ContextMenu Configuration

An object defining configuration options for the dxContextMenu widget.

activeStateEnabled

A Boolean value specifying whether or not the widget changes its state when interacting with a user.

Type: Boolean
Default Value: true

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

allowSelection

Specifies whether or not a user can select a menu item.

Type: Boolean
Default Value: true

allowSelectItem

Deprecated

Use the allowSelection option instead.

Specifies whether or not a user can select a menu item.

Type: Boolean
Default Value: true

allowSelectOnClick

Specifies whether or not a user can select an item by clicking on it.

Type: Boolean
Default Value: true

animation

An object that defines the animation options of the widget.

Type: animation configuration
Default Value: { show: { type: "fade", from: 0, to: 1, duration: 100 }, hide: { type: 'fade', from: 1, to: 0, duration: 100 } }

contentReadyAction

An action performed when widget content is ready.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action when widget content is ready.

Alternatively, you can assign a URL to which the browser will navigate when widget content is ready.

If data displayed by the widget is specified using a DataSource instance, the contentReadyAction is executed each time the load() method of the DataSource instance is called as well as when widget content is ready. In this case, when you create the widget, the contentReadyAction is executed twice: when widget content is ready (at this moment, the widget does not display items) and when the DataSource is loaded (the widget displays the loaded items).

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto; padding-top: 10px">
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', contentReadyAction: contentReady }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];

contentReady = function(data) {
    DevExpress.ui.notify("Content is ready", "success", 1500);
}
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-left: 10px
}

cssClass

Specifies the name of the CSS class associated with the context menu.

Type: String
Default Value: ''

Use this option to customize the current context menu in isolation from other context menus created on the same page.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 600px; margin: 0 auto">
    <div class="target1" id="contextMenuTarget1"></div>
    <div class="target2" id="contextMenuTarget2"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget1' }"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget2', cssClass: 'customClass' }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];
body{
  text-align: center;
}

.target1 {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    float: left;
    height: 150px; 
    width:100px; 
    margin-top: 10px; 
    margin-left: 10px
}

.target2 {
    background: url(/Content/images/doc/14_1/PhoneJS/headphone.jpg) round round; 
    float: left;
    height: 150px; 
    width:100px; 
    margin-top: 10px; 
    margin-left: 150px
}

.dx-context-menu .dx-menu-item
{
    border-bottom: 1px solid rgba(0,0,0,.2);
}
.customClass .dx-menu-item 
{
    border-bottom: none;
}

dataSource

A data source used to fetch data to be displayed by the widget.

Default Value: null

You can assign an array directly to this option as well as use the Data Source provided by the DevExtreme library.

To display widget items, a default template can be used. This template is based on the data source fields that are listed in the Default Item Template section of the widget's API. Alternatively, you can implement a custom item template. For details refer to the Customize Widget Item Appearance topic.

direction

Deprecated

Use the rtlEnabled option instead.

Specifies the direction at which the first level submenu is displayed.

Type: String
Default Value: 'auto'
Accepted Values: 'auto'|'right'|'left'

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto">
    <div style="text-align:left; padding-left: 10px; padding-top: 10px"><span data-bind="dxCheckBox: { checked: menuDisabled, height: 14, width: 14 }"></span>  Disabled</div>
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', disabled: menuDisabled }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];

menuDisabled = ko.observable(false);
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-top: 10px; 
    margin-left: 10px
}

height

Specifies the height of the widget.

Type: Number|String|function
Return Value: Number|String
The widget height.
Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget height in pixels.
  • string
    A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget height. For example, see the following code.

    JavaScript
    height: function () { 
        return baseHeight - 10 + "%";
    }
Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto">
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { items: menuItems, target: '#contextMenuTarget', height: 200 }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
]
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-top: 10px; 
    margin-left: 10px
}

hiddenAction

An action performed after the context menu is hidden.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: false

Assign a function to perform a custom action after the context menu is hidden.

Alternatively, you can assign a URL to which the browser will navigate after the context menu is hidden.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto; padding-top: 10px">
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', hiddenAction: hidden }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];

hidden = function(data) {
    DevExpress.ui.notify("The context menu is hidden", "success", 1500);
}
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-left: 10px
}

hidingAction

An action performed before the context menu is hidden.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
cancel: Boolean
Indicates whether to cancel hiding the overlay.
Default Value: false

Assign a function to perform a custom action before the context menu is hidden.

Alternatively, you can assign a URL to which the browser will navigate before the context menu is hidden.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto; padding-top: 10px">
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', hidingAction: hiding }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];

hiding = function(data) {
    DevExpress.ui.notify("The context menu is hiding now", "success", 1500);
}
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-left: 10px
}

hoverStateEnabled

A Boolean value specifying whether or not a menu item changes its state when being hovered by an end user.

Type: Boolean
Default Value: true

invokeOnlyFromCode

Specifies whether the context menu can be called only from code or by user interaction as well.

Type: Boolean
Default Value: false

If the invokeOnlyFromCode option is set to true, a browser context menu is displayed when you right click the target element. To display the dxContextMenu widget for this target element, use the visible option.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto">
    <div style="text-align:left; padding-left: 10px; padding-top: 10px"><span data-bind="dxCheckBox: { checked: menuInvoke, height: 14, width: 14 }"></span>  Invoke only form code</div>
    <div style="float: left; margin-left: 10px; margin-top: 10px"  data-bind="dxButton: {
        text: 'Click to show context menu', 
        clickAction: function() { $('#contextMenu').dxContextMenu({ visible: true }) }
        }"></div>
    <div class="target" id="contextMenuTarget"></div>
    <div id="contextMenu" data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', invokeOnlyFromCode: menuInvoke }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];

menuInvoke = ko.observable(true);
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-top: 60px; 
    margin-left: 10px
}

itemClickAction

An action performed when a collection item is clicked.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
itemData: Object
The data that is bound to the clicked item.
itemElement: jQuery
An HTML element of the item.
Default Value: null

Assign a function to perform a custom action when the widget's collection item is clicked.

Alternatively, you can assign a URL to which the browser will navigate when the item is clicked.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto; padding-top: 10px">
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', itemClickAction: itemClicked }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];

itemClicked = function(data) {
    if (!data.itemData.items) {
        DevExpress.ui.notify("The \"" + data.itemData.text + "\" item is clicked", "success", 1500);
    }
}
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-left: 10px
}

itemRender

A function used to render collection items.

Type: function
Function parameters:
itemData: Object
An object representing the item to be rendered.
itemIndex: Number
The index of the item to be rendered.
itemElement: jQuery
An HTML element containing the item to be rendered.
Return Value: String|DOM Node|jQuery
An HTML string, Element, or jQuery object representing the rendered item.
Default Value: null

As in all container widgets in DevExtreme, items of this widget are displayed by a default HTML template. This template is based on certain fields of the data source. You can define a custom item template that will use specific fields of the data source. To learn more about item templates, refer to the Customize Widget Item Appearance topic.

Implement the itemRender function to provide a custom item template for a given collection item. This function is called each time a collection item of the widget is rendered.

Return an HTML string, Element, or jQuery object representing the rendered item.

Alternatively, you can define the dxTemplate markup component within the widget element and set its name option to item. In this case, the markup enclosed into the dxTemplate component will be automatically applied as an item template. In addition, you may need to define several item templates and apply each of them when required. In this instance, use the itemTemplate option to set the required template.

Refer to the Customize Widget Item Appearance topic to learn more about ways to render collection items.

itemRenderedAction

An action performed after a collection item is rendered.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
itemData: Object
The data that is bound to the rendered item.
itemElement: jQuery
An HTML element of the item.
Default Value: null

Assign a function to perform a custom action after a collection item is rendered.

Alternatively, you can assign a URL to which the browser will navigate after a collection item is rendered.

items

Holds an array of context menu items.

Type: Array

To display menu items, a default template can be used. This template is based on certain fields of the item object. Refer to the Default Item Template section to learn which fields are taken into account when creating a default template for items. Alternatively, you can implement a custom item template. For details, refer to the Customize Widget Item Appearance topic.

NOTE: Each item of the array passed to the items option can include the items field, which takes on an object with the same structure as a root item. Therefore, you can create as many menu levels as you need.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto; padding-top: 10px">
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { items: menuItems, target: '#contextMenuTarget' }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-left: 10px
}

itemSelectAction

An action performed when a menu item is selected.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
selectedItem: Object
Provides access to the object representing the selected item.
previousSelectedItem: Object
Provides access to the object representing the previously selected item.
itemData: Object
The data that is bound to the selected item.
itemElement: jQuery
An HTML element of the selecteditem.
Default Value: null

Assign a function to perform a custom action when a menu item is selected.

Alternatively, you can assign a URL to which the browser will navigate when a menu item is selected.

itemTemplate

The template to be used for rendering items.

Type: String|function|DOM Node|jQuery
Return Value: String|jQuery
A template name or a template container.
Default Value: "item"

As in all container widgets in DevExtreme, items of this widget are displayed by a default HTML template. This template is based on specific data source fields. You can define a custom item template that will use specific fields of the data source. To learn more about item templates, refer to the Customize Widget Item Appearance topic.

In a simple case, you can define a single custom template for widget items using the dxTemplate markup component within the widget's container. Set the name option of this component to 'item'. In this instance, this template will automatically be used as an item template, and you don't have to specify the itemTemplate option.

However, in some cases you may need to have several custom item templates defined within the widget's container and apply each of them in different scenarios. In this instance, use one of the following ways of setting the required template to the itemTemplate option.

  • Assign a string representing the name of the required template.
  • Assign a function that returns the name of the template as a result of a certain logic.

When you have several collection widgets, you may need to define a common template for them. For this purpose, factor out a template into a separate element, as demonstrated below.

HTML
<script type="text/html" id="person-template">
    <h3 data-bind="text: name"></h3>
    <p>Address: <span data-bind="text: address"></span></p>
</script>

To set the common template as a collection item template, assign one of the following values to the itemTemplate option.

  • Assign a jQuery object representing the template's container
  • Assign a DOM Node representing the template's container
  • Assign a function that returns the jQuery object or a DOM Node representing the template's container

You can use a custom template engine. For this purpose, call the DevExpress.ui.setTemplateEngine(name) method passing the name of one of the supported template engine. You can see a demo where a custom template engine is used: Data Grid - Row Underscore Template.

position

An object defining widget positioning options.

Type: Object
Default Value: { my: 'top left', at: 'top left' }

NOTE: To specify the element against which the context menu will be positioned, use the target option instead of the of field of the position object. If both target and of are specified, target will be used.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto">
    <div style="float: left; margin-left: 10px; margin-top: 10px"  data-bind="dxButton: {
        text: 'Click to show context menu', 
        clickAction: function() { $('#contextMenu').dxContextMenu({ visible: true }) }
        }"></div>
    <br>
    <div class="target" id="contextMenuTarget"></div>
    <div id="contextMenu" data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', position: { at: 'right top', my: 'left top' } }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
]
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-top: 50px;
    margin-left: 10px;
}

positioningAction

An action performed before the context menu is positioned.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused the action's execution.
position: position
Returns an object specifying a position for the context menu.
Default Value: false

Assign a function to perform a custom action before the context menu is positioned.

Alternatively, you can assign a URL to which the browser will navigate before the context menu is positioned.

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

Type: Boolean
Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto">
    <div style="text-align:left; padding-left: 10px; padding-top: 10px"><span data-bind="dxCheckBox: { checked: menuRTL, height: 14, width: 14 }"></span>  RTL Enabled</div>
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', rtlEnabled: menuRTL }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];

menuRTL = ko.observable(false);
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-top: 10px; 
    margin-left: 10px
}

selectedItem

Holds an object representing the currently selected menu item.

Type: Object
Default Value: null

showingAction

An action performed before the context menu is shown.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: false

Assign a function to perform a custom action before the context menu is shown.

Alternatively, you can assign a URL to which the browser will navigate before the context menu is shown.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto; padding-top: 10px">
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', showingAction: showing }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];

showing = function(data) {
    DevExpress.ui.notify("The context menu is showing now", "success", 1500);
}
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-left: 10px
}

shownAction

An action performed when the context menu is shown.

Type: String|function(e)
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: false

Assign a function to perform a custom action when the context menu is shown.

Alternatively, you can assign a URL to which the browser will navigate when the context menu is shown.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto; padding-top: 10px">
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', shownAction: shown }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];

shown = function(data) {
    DevExpress.ui.notify("The context menu is shown", "success", 1500);
}
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-left: 10px
}

showSubmenuMode

Specifies by which user interaction the context menu is shown.

Type: String
Default Value: 'onHover'
Accepted Values: 'onHover'|'onHoverStay'|'onClick'

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto; padding-top: 10px">
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', showSubmenuMode: 'onclick' }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-left: 10px
}

submenuDirection

Specifies the direction at which submenus are displayed.

Type: String
Default Value: 'auto'
Accepted Values: 'auto'|'right'|'left'

By default, the submenus of the context menu are displayed so that they are visible totally, based on the widget location on the page. Use the submenuDirection option to display submenus to the left or to the right from the context menu.

target

The target element associated with a popover.

Default Value: window

Specify this option to indicate the element for which the context menu will be invoked. This option can take on one of the following values.

JavaScript
//CSS selector
target: '#targetElement';

//jQuery wrapper
target: $('#targetElement');

//DOM element
target: document.getElementById('targetElement');

To align the context menu near this element, use the position option.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto; padding-top: 10px">
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget' }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-left: 10px
}

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: false

Use this option to display/hide a context menu in code.

Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto">
    <div style="text-align:left; padding-left: 10px; padding-top: 10px"><span data-bind="dxCheckBox: { checked: menuVisible, height: 14, width: 14 }"></span>  Visible</div>
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { dataSource: menuItems, target: '#contextMenuTarget', visible: menuVisible }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
];

menuVisible = ko.observable(false);
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-top: 10px; 
    margin-left: 10px
}

width

Specifies the width of the widget.

Type: Number|String|function
Return Value: Number|String
The widget width.
Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget width in pixels.
  • string
    A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget width. For example, see the following code.

    JavaScript
    width: function () { 
        return baseWidth - 10 + "%";
    }
Show Example:
jQuery
<div style="background-color: #F0F0F0; height: 400px; max-width: 400px; margin: 0 auto">
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: { items: menuItems, target: '#contextMenuTarget', width: 200 }"></div>
</div>
menuItems = [
    { text: 'Increase' },
    { 
        text: 'Share', 
        items: [
            { text: 'Send to a friend' },
            { text: 'Send to a group' }]
    },
    { text: 'Download' },
    { text: 'Comment' },
    { text: 'Favorite' }
]
body{
  text-align: center;
}

.target {
    background: url(/Content/images/doc/14_1/PhoneJS/cherry.jpg) round round; 
    height: 150px; 
    width:100px; 
    margin-top: 10px; 
    margin-left: 10px
}