ContextMenuBase
Abstract base class used by other context menu features.
Keyboard shortcuts
This base class has the following default keyboard shortcuts:
| Keys | Action | Action description |
|---|---|---|
| Space | showContextMenuByKey | Shows context menu for currently focused element |
| Ctrl+Space | showContextMenuByKey | Shows context menu for currently focused element |
For more information on how to customize keyboard shortcuts, please see our guide (Guides/Customization/Keyboard shortcuts)
Configs
17
Configs
17Other
A CSS selector targeting an element, such as an ellipsis icon that when clicked will trigger the menu to show.
Menu items object containing named child menu items to apply to the feature's provided context menu.
This may add extra items as below, but may also remove any of the default items by configuring the name
of the item as null.
features : {
cellMenu : {
// This object is applied to the Feature's predefined default items
items : {
switchToDog : {
text : 'Dog',
icon : 'fa fa-fw fa-dog',
onItem({record}) {
record.dog = true;
record.cat = false;
},
weight : 500 // Make this second from end
},
switchToCat : {
text : 'Cat',
icon : 'fa fa-fw fa-cat',
onItem({record}) {
record.dog = false;
record.cat = true;
},
weight : 510 // Make this sink to end
},
add : null // We do not want the "Add" submenu to be available
}
}
}
See Keyboard shortcuts for details
An object containing default config objects which may be referenced by name in the items
config. For example, a specialized Menu subclass may have a namedItems default
value defined like this:
namedItems : {
removeRow : {
text : 'Remove row',
onItem() {
this.ownerGrid.remove(this.ownerGrid.selectedRecord);
}
}
}
Then whenever that subclass is instantiated and configured with an items object, the
items may use the above defaults like this:
items : {
removeRow : true, // The referenced namedItem will be applied to this
otherItemRef : {
text : 'Option 2',
onItem() { }
}
}
If a menu instance (or its class) does not include removeRow in its items, no menu item will be
created.
Set to true to prevent the native menu from showing when there are no menu items to show, or
you manually prevent the menu from showing in an event listener.
Event which is used to show context menu. Available options are: 'contextmenu', 'click' and 'dblclick'. Default value is used from contextMenuTriggerEvent
This is a type of the context menu used to generate correct names for methods and events. Should be in camel case. Required to be set in subclass.
Misc
Properties
18
Properties
18Common
Class hierarchy
Other
Set to true to prevent the native menu from showing when there are no menu items to show, or
you manually prevent the menu from showing in an event listener.
Functions
29
Functions
29Other
Shows the context menu.
| Parameter | Type | Description |
|---|---|---|
event | Event | The initiating event. |
alignSpec | AlignSpec | HTMLElement | Menu alignment specification, or an element to align to |
Configuration
Events
Misc
Events
7
Events
7This event fires on the owning widget when an item is selected in the context menu.
// Adding a listener using the "on" method
contextMenuBase.on('contextMenuItem', ({ source, menu, item }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Widget | The owning widget |
menu | Menu | The menu |
item | MenuItem | Selected menu item |
This event fires on the owning widget when a check item is toggled in the context menu.
// Adding a listener using the "on" method
contextMenuBase.on('contextMenuToggleItem', ({ source, menu, item, checked }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Widget | The owning widget |
menu | Menu | The menu |
item | MenuItem | Selected menu item |
checked | Boolean | Checked or not |
Event handlers
7
Event handlers
7This event called on the owning widget when an item is selected in the context menu.
new ContextMenuBase({
onContextMenuItem({ source, menu, item }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Widget | The owning widget |
menu | Menu | The menu |
item | MenuItem | Selected menu item |
This event called on the owning widget when a check item is toggled in the context menu.
new ContextMenuBase({
onContextMenuToggleItem({ source, menu, item, checked }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Widget | The owning widget |
menu | Menu | The menu |
item | MenuItem | Selected menu item |
checked | Boolean | Checked or not |
Typedefs
3
Typedefs
3A context object passed to any processItems method defined for a context menu feature,
and also the basis of events fired by context menu features.
| Parameter | Type | Description |
|---|---|---|
feature | ContextMenuBase | A reference to the menu feature which owns this context. |
domEvent | Event | The initiating event. |
event | Event | DEPRECATED: The initiating event. |
point | Number[] | The client |
targetElement | HTMLElement | The target to which the menu is being applied. |
items | Object<String, MenuItemEntry> | The context menu configuration items. |
selection | Model[] | The record selection in the client (Grid, Scheduler, Gantt or Calendar). |
A value used to configure a menu item in a menu's items object. Use an
object to configure a menu item. See MenuItem config.
Use boolean false or null value to disable menu item in a preconfigured items.