ContextMenu
The Context Menu component on the user right click or touch hold action that provides various actions an user can choose from.
Properties
animationSettings MenuAnimationSettingsModel
Specifies the animation settings for the sub menu open.
Default:
{ duration: 400, easing: 'ease', effect: 'SlideDown' }
cssClass String
Specifies CSS classes to customize the appearance of the control.
Default:
""
enableHtmlSanitizer Boolean
Specifies whether to allow the rendering of untrusted HTML and JavaScript values withing the control. When true, any untrusted strings or scripts will be remote before rendering.
Default: true
enableRtl Boolean
Specifies whether to render the control in right to left direction.
Default: false
enableScrolling Boolean
Specifies whether to enable or disable the scrolling open for the menu. Setting has no effect on the ContextMenu control.
Default: false
enableState Boolean
Specifies whether to persist the state of the control between page loads.
Default: false
fields FieldSettingsModel
Specifies field mappings from the dataStore to menu items.
Default: { itemId: "id", text: "text", parentId: "parentId", iconCss: "iconCss", url: "url", separator: "separator", children: "items" }
filter String
Specifies the filter selector for elements inside the target that the context menu will be opened. Setting has no effect on the Menu control.
Default: ""
hoverDelay Number
Specifies the hover delay in milliseconds before the menu will open when the target element is hovered over.
Default: 0
items MenuItemModel
Specifies the collection of menu items.
Default: []
locale String
Specifies the culture and localization value for this control, overriding the globally defined value.
Default: en-US
showItemOnClick Boolean
Specifies whether to show a sub menu or not on click.
Default: false
target String
Specifies target element which the ContextMenu should be opened or the target element to open/close the menu when clicked in Hamburger mode.
Default: ""
template String Function
Specifies the template for the menu item. Setting has no effect on the ContextMenu control.
Default: null
Methods
addEventListener
Attaches an event handler to a specified element. This method allows you to set up a function that will be called whenever the specified event is delivered to the target element.
| Parameter | Type | Description |
|---|---|---|
| eventName | String | A string value that specifies the name of the event. |
| handler | Function | Specifies the function to run when the event is triggered. |
Returns: Void
appendTo
Appends the component to the specified HTML element.
| Parameter | Type | Description |
|---|---|---|
| selector | String HTMLElement | The select to a specified HTML element or an HTML element where the control will be appended to. |
Returns: Void
close
Closes the context menu if it is opened.
Returns: Void
dataBind
Applies all pending property changes to the control.
Returns: Void
destroy
Destroys the Aware instance, detaches all related events, removes attributes, css classes and restores the root element.
Returns: Void
enableItems
Enables or disables the given items.
| Parameter | Type | Description |
|---|---|---|
| items | String[] | Specifies the text/id of the menu items that will be enabled or disabled. |
| enable | String[] | Specifies whether the items should be enabled (true) or disabled (false). |
| byId (optional) | String[] | Specifies whether to identity the item by unique id instead of its text value. |
Returns: Void
getItemIndex
Gets the item index for the given by text or by id.
| Parameter | Type | Description |
|---|---|---|
| item | MenuItemModel String | Specifies the text or the menu item to get the index for. |
| byId (optional) | Boolean | Specifies whether to identity the item by unique id instead of its text value. |
Returns: Void
getLocalData
Gets the current properties values for the accordion that will be persisted to the state.
Returns: String
getRootElement
Gets the root element of the control.
Returns: HTMLElement
getStateData
Gets the current persisted state data for the control.
Returns: String
hideItems
This method is used to hide the menu items in the Menu based on the items text.
| Parameter | Type | Description |
|---|---|---|
| items | String[] | Specifies the text/id of the menu items that will be hidden. |
| byId (optional) | Boolean | Specifies whether to identity the item by unique id instead of its text value. |
Returns: Void
insertAfter
Insert menu items to the menu after the given item.
| Parameter | Type | Description |
|---|---|---|
| items | MenuItemModel[] | Specifies the menu items that will be inserted into the menu. |
| text | String | Specifies the text of menu item that the items need to be inserted after. |
| byId (optional) | Boolean | Specifies whether to identity the item by unique id instead of its text value. |
Returns: Void
insertBefore
Insert menu items to the menu before the given item.
| Parameter | Type | Description |
|---|---|---|
| items | MenuItemModel[] | Specifies the menu items that will be inserted into the menu. |
| text | String | Specifies the text of menu item that the items need to be inserted before. |
| byId (optional) | Boolean | Specifies whether to identity the item by unique id instead of its text value. |
Returns: Void
open
Opens the context menu at the give position.
| Parameter | Type | Description |
|---|---|---|
| top | Number | Specifies the vertical position to open the context menu. |
| left | Number | Specifies the horizontal position to open the context menu. |
| target (optional) | HTMLElement | Specifies a target element to calculate the z-index for the context menu. |
Returns: Void
refresh
Applies all pending property changes to the accordion and re-renders the component.
Returns: Void
removeEventListener
Removes the attached event handler for the specified event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | String | A string value that specifies the name of the event to be removed. |
| handler | Function | Specifies the function to be removed. |
Returns: Void
removeItems
Removes the given items from the menu.
| Parameter | Type | Description |
|---|---|---|
| items | String[] | Specifies the text of the menu items that will be removed. |
| byId (optional) | Boolean | Specifies whether to identity the item by unique id instead of its text value. |
Returns: Void
showItems
This method is used to show the menu items in the Menu based on the items text.
| Parameter | Type | Description |
|---|---|---|
| items | String[] | Specifies the text/id of the menu items that will be shown. |
| byId (optional) | Boolean | Specifies whether to identity the item by unique id instead of its text value. |
Returns: Void
Events
beforeClose EmitType<BeforeOpenCloseMenuEventArgs>
Event callback that is raised when before the menu is closed.
beforeItemRender EmitType<MenuEventArgs>
Triggers while rendering each menu item.
beforeOpen EmitType<BeforeOpenCloseMenuEventArgs>
Event callback that is raised when before the menu is opened.
created EmitType<CreatedEventArgs>
Event callback that is raised when the control has been created.
destroyed EmitType<Object>
Event callback that is raised when the control has been destroyed.
onClose EmitType<OpenCloseMenuEventArgs>
Event callback that is raised when the menu has closed.
onOpen EmitType<OpenCloseMenuEventArgs>
EventEvent callback that is raised when the menu has opened.
select EmitType<MenuEventArgs>
Event callback that is raised when a menu item is selected.