This page covers a non-latest version of Handsontable.
# ContextMenu
# Description
This plugin creates the Handsontable Context Menu. It allows to create a new row or column at any place in the grid among other features. Possible values:
true
(to enable default options),false
(to disable completely){ uiContainer: containerDomElement }
(to declare a container for all of the Context Menu's dom elements to be placed in).
or array of any available strings:
'row_above'
'row_below'
'col_left'
'col_right'
'remove_row'
'remove_col'
'undo'
'redo'
'make_read_only'
'alignment'
'---------'
(menu item separator)'borders'
(with Options#customBorders turned on)'commentsAddEdit'
(with Options#comments turned on)'commentsRemove'
(with Options#comments turned on).
See the context menu demo for examples.
Example
// as a boolean
contextMenu: true
// as a array
contextMenu: ['row_above', 'row_below', '---------', 'undo', 'redo']
# Options
# contextMenu
Source code (opens new window)contextMenu.contextMenu : boolean | Array<string> | object
Defines if the right-click context menu should be enabled. Context menu allows to create new row or column at any place in the grid among other features. Possible values:
true
(to enable default options),false
(to disable completely)- an array of predefined options,
- an object with defined structure.
If the value is an object, you can also customize the options with:
disableSelection
- aboolean
, if set to true it prevents mouseover from highlighting the item for selectionisCommand
- aboolean
, if set to false it prevents clicks from executing the command and closing the menu.
See the context menu demo for examples.
Default: undefined
Example
// as a boolean
contextMenu: true,
// as an array
contextMenu: ['row_above', 'row_below', '---------', 'undo', 'redo'],
// as an object (`name` attribute is required in the custom keys)
contextMenu: {
items: {
"option1": {
name: "option1"
},
"option2": {
name: "option2",
submenu: {
items: [
{
key: "option2:suboption1",
name: "option2:suboption1",
callback: function(key, options) {
...
}
},
...
]
}
}
}
},
# Members
# DEFAULT_ITEMS
Source code (opens new window)ContextMenu.DEFAULT_ITEMS ⇒ Array<string>
Context menu default items order when contextMenu
options is set as true
.
# Methods
# close
Source code (opens new window)contextMenu.close()
Closes the menu.
# destroy
Source code (opens new window)contextMenu.destroy()
Destroys the plugin instance.
# disablePlugin
Source code (opens new window)contextMenu.disablePlugin()
Disables the plugin functionality for this Handsontable instance.
# enablePlugin
Source code (opens new window)contextMenu.enablePlugin()
Enables the plugin functionality for this Handsontable instance.
# executeCommand
Source code (opens new window)contextMenu.executeCommand(commandName, ...params)
Execute context menu command.
You can execute all predefined commands:
'row_above'
- Insert row above'row_below'
- Insert row below'col_left'
- Insert column left'col_right'
- Insert column right'clear_column'
- Clear selected column'remove_row'
- Remove row'remove_col'
- Remove column'undo'
- Undo last action'redo'
- Redo last action'make_read_only'
- Make cell read only'alignment:left'
- Alignment to the left'alignment:top'
- Alignment to the top'alignment:right'
- Alignment to the right'alignment:bottom'
- Alignment to the bottom'alignment:middle'
- Alignment to the middle'alignment:center'
- Alignment to the center (justify).
Or you can execute command registered in settings where key
is your command name.
Param | Type | Description |
---|---|---|
commandName | string | The command name to be executed. |
...params | * | Additional paramteres passed to command executor module. |
# isEnabled
Source code (opens new window)contextMenu.isEnabled() ⇒ boolean
Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInit
hook and if it returns true
than the ContextMenu#enablePlugin method is called.
# open
Source code (opens new window)contextMenu.open(event)
Opens menu and re-position it based on the passed coordinates.
Param | Type | Description |
---|---|---|
event | Event | The mouse event object. |
# updatePlugin
Source code (opens new window)contextMenu.updatePlugin()
Updates the plugin state. This method is executed when Core#updateSettings is invoked.