This page covers a non-latest version of Handsontable.

# ContextMenu

Description
Options
- contextMenu
Members
- DEFAULT_ITEMS
Methods

# 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

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

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

# DEFAULT_ITEMS

Source code

ContextMenu.DEFAULT_ITEMS ⇒ Array<string>

Context menu default items order when contextMenu options is set as true.

# Methods

# close

Source code

contextMenu.close()

Closes the menu.

# destroy

Source code

contextMenu.destroy()

Destroys the plugin instance.

# disablePlugin

Source code

contextMenu.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

# enablePlugin

Source code

contextMenu.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

# executeCommand

Source code

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

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

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

contextMenu.updatePlugin()

Updates the plugin state. This method is executed when Core#updateSettings is invoked.

← Comments CopyPaste →