ContextMenu
Directive
kendo-contextmenu
Child Components
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.