ContextMenu

Directive

kendo-contextmenu

Child Components

• kendo-menu-item

Props

align-to-anchor Boolean

Specifies that when it is displayed, the ContextMenu will be aligned to the target or to the filter element if specified (alignToAnchor in Kendo UI for jQuery).

animation Boolean | Object

A collection of Animation objects for changing the default animations (animation in Kendo UI for jQuery). If animation is set to false, all animations of the ContextMenu will be disabled. Each animation has a reverse option which, by default, is used for the closing effect but which can be overridden by setting the close animation. Each animation also has a direction which can be set off the animation—for example, slideIn:Down. The supported composite props are available in AnimationProps.

append-to String | jQuery

The DOM element to which the ContextMenu will be appended (appendTo in Kendo UI for jQuery). The element needs to be relatively positioned.

close-on-click Boolean

Specifies that sub-menus will close after the selection of the item is the user is not willing to navigate (closeOnClick in Kendo UI for jQuery).

copy-anchor-styles Boolean

Copies and uses the styles from the anchor (copyAnchorStyles in Kendo UI for jQuery).

data-source Object | Array

The data source of the Menu which will be used for rendering its items (dataSource in Kendo UI for jQuery).

The supported values are:

• A JSON object.
• An array that contains an item.
• An array of items.
• An existing kendo.data.HierarchicalDataSource instance.

data-image-url-field String

The field of the data item that provides the image URL of the ContextMenu nodes (dataImageUrlField in Kendo UI for jQuery).

data-sprite-css-class-field String

The field of the data item that provides the sprite CSS class of the nodes (dataSpriteCssClassField in Kendo UI for jQuery). If an array, each level uses the field that is at the same index in the array, or the last item in the array.

data-text-field String | Array

The field of the data item that provides the text content of the nodes (dataTextField in Kendo UI for jQuery). If an array, each level uses the field that is at the same index in the array, or the last item in the array.

data-url-field String

The field of the data item that provides the link URL of the nodes (dataUrlField in Kendo UI for jQuery).

data-content-field String

The field of the data item that provides the content of the nodes (dataContentField in Kendo UI for jQuery).

direction String

Specifies the opening direction of the ContextMenu sub-menus (direction in Kendo UI for jQuery).

The supported value are:

• top
• bottom
• left
• right

filter String

Specifies the filter selector of the ContextMenu—the ContextMenu will only be shown on items that satisfy the provided selector (filter in Kendo UI for jQuery).

hover-delay Number

Specifies the delay (in milliseconds) before the sub-menus are opened or closed which helps to avoid accidental closure on leaving (hoverDelay in Kendo UI for jQuery).

orientation String

The orientation of the root menu (orientation in Kendo UI for jQuery).

The supported values are:

• horizontal
• vertical

popup-collision String

Specifies the way the ContextMenu will adjust to screen boundaries (popupCollision in Kendo UI for jQuery).

The supported approaches are:

• (Default) fit—A sub-menu fits with a horizontal parent or the root menu which means that it will move to fit within the screen boundaries in all directions.
• fit flip—A sub-menu with vertical parent will fit vertically and flip over its parent horizontally.

You can also switch off the screen boundary detection completely by setting popupCollision to false.

scrollable Boolean | Object

If scrollable is enabled, the ContextMenu displays buttons that scroll items which cannot fit the viewport height (scrollable in Kendo UI for jQuery). By default, scrolling is disabled. The supported composite props are available in ScrollableProps.

show-on String

The event or events on which the ContextMenu will open (showOn in Kendo UI for jQuery). By default, for desktop devices the ContextMenu is displayed on the contextmenu event and for touch devices the ContextMenu is displayed on the hold event. Accepts pointer, mouse, and touch events, individually or in combinations separated by spaces.

target String | jQuery

The element on which the ContextMenu will open (target in Kendo UI for jQuery). The default element is the body of the document.

Events

close: Function

Fires before a sub-menu or the ContextMenu is closed (close in Kendo UI for jQuery). To prevent the closing of the sub-menu, you can cancel the close event.

open: Function

Fires before a sub-menu or the ContextMenu is opened (open in Kendo UI for jQuery). To prevent the opening of the sub-menu, you can cancel the open event.

activate: Function

Fires when a sub-menu or the ContextMenu is opened and its animation finishes (activate in Kendo UI for jQuery).

deactivate: Function

Fires when a sub-menu or the ContextMenu is closed and its animation finishes (deactivate in Kendo UI for jQuery).

select: Function

Fires when a menu item is selected (select in Kendo UI for jQuery).

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI ContextMenu instance.