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
The contextMenu
option configures the ContextMenu
plugin.
You can set the contextMenu
option to one of the following:
Setting | Description |
---|---|
false | Disable the ContextMenu plugin |
true | - Enable the ContextMenu plugin- Use the default context menu options |
An array | - Enable the ContextMenu plugin- Modify individual context menu options |
An object | - Enable the ContextMenu plugin- Apply a custom context menu configuration |
Read more:
- Context menu →
- Context menu: Context menu with default options →
- Context menu: Context menu with specific options →
- Context menu: Context menu with fully custom configuration options →
- Plugins:
ContextMenu
→
Default: undefined
Example
// enable the `ContextMenu` plugin
// use the default context menu options
contextMenu: true,
// enable the `ContextMenu` plugin
// and modify individual context menu options
contextMenu: ['row_above', 'row_below', '---------', 'undo', 'redo'],
// enable the `ContextMenu` plugin
// and apply a custom context menu configuration
contextMenu: {
items: {
'option1': {
name: 'option1'
},
'option2': {
name: 'option2',
submenu: {
items: [
{
key: 'option2:suboption1',
name: 'option2:suboption1',
callback: function(key, options) {
...
}
},
...
]
}
}
}
},
# Members
# ContextMenu
Source code (opens new window)contextMenu.ContextMenu
# 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's state.
This method is executed when updateSettings()
is invoked with any of the following configuration options: