ContextMenuComponent

Represents the Kendo UI ContextMenu component for Angular.

ts

@Component({
   selector: 'my-app',
   template: `
   <div #target>
       Right-click to open Context menu</p>
   </div>
   <kendo-contextmenu [target]="target" [items]="items"> </kendo-contextmenu>
   `
})
class AppComponent {
   public items: any[] = [{ text: 'item1', items: [{ text: 'item1.1' }] }, { text: 'item2', disabled: true }];
}

Selector

kendo-contextmenu

Export Name

Accessible in templates as #kendoContextMenuInstance="kendoContextMenu"

Inputs

Name	Type	Default	Description
alignToAnchor	boolean	false	Indicates that the ContextMenu will be aligned to the target or to the filter element (if specified).
anchorAlign	Align	The possible values are: horizontal — left , center , right vertical — top , center , bottom	Specifies the pivot point of the anchor. Applicable if alignToAnchor is true.
animate	boolean | MenuAnimation		Sets the Menu animation.
appendTo	ViewContainerRef		Defines the container to which the popups will be appended.
ariaLabel	string		Sets the value for the aria-label attribute of the ContextMenu.
collision	Collision	{ horizontal: 'fit', vertical: 'flip' }	Configures the collision behavior of the popup.
filter	string		Specifies a CSS selector which filters the elements in the target for which the ContextMenu will open (see example).
hoverDelay	number		Specifies the delay in milliseconds before the Menu items are opened or closed on item hover or leave (see example). Used to avoid the accidental opening or closing of the items.
items	any[]		Specifies the Menu items.
openOnClick	boolean | OpenOnClickSettings		Specifies that the root items can be opened only on click (see example).
popupAlign	Align	The possible values are: horizontal — left , center , right vertical — top , center , bottom	Specifies the pivot point of the popup.
popupAnimate	boolean | PopupAnimation	true	Specifies the popup animation.
showOn	string	'contextmenu'	Specifies the event on which the ContextMenu will open (see example). Accepts the name of a native DOM event. For example, click, dblclick, mouseover, etc.
size	MenuSize		Sets the Menu size. The possible values are: small medium (default) large none
target	string | ElementRef<any> | HTMLElement | ContextMenuTargetContainerDirective		Specifies the element for which the ContextMenu will open (see example).
vertical	boolean	true	Specifies if the Menu will be vertically rendered (see example).

Events

Name	Type	Description
close	EventEmitter<ContextMenuEvent>	Fires when a Menu item is closed (see example).
open	EventEmitter<ContextMenuEvent>	Fires when a Menu item is opened (see example).
popupClose	EventEmitter<ContextMenuPopupEvent>	Fires when the Menu is closed (see example).
popupOpen	EventEmitter<ContextMenuPopupEvent>	Fires when the Menu is opened (see example).
select	EventEmitter<ContextMenuSelectEvent>	Fires when a Menu item is selected (see example).

Methods

hide
Hides the ContextMenu.

show
Shows the ContextMenu for the specified target.
Parameters target ElementRef<any> | HTMLElement | Offset The offset or the target element for which the ContextMenu will open.