JavaScript/jQuery HtmlEditor - tableContextMenu.items

Configures context menu items.

Use this property to customize the context menu. For example, the following code creates a flat menu of table commands instead of the default hierarchical menu. The beginGroup property is used to divide command groups.

index.js
  • $(function() {
  • $("#htmlEditorContainer").dxHtmlEditor({
  • // ...
  • tableContextMenu: {
  • enabled: true,
  • items: [
  • 'insertHeaderRow',
  • 'insertRowAbove',
  • 'insertRowBelow',
  • { name: 'insertColumnLeft', beginGroup: true },
  • 'insertColumnRight',
  • { name: 'deleteColumn', beginGroup: true },
  • 'deleteRow',
  • 'deleteTable',
  • { name: 'cellProperties', beginGroup: true },
  • 'tableProperties'
  • ]
  • }
  • });
  • });

beginGroup

Specifies whether a group separator is displayed over the item.

Type:

Boolean

You can add group separators only between items in submenus.

closeMenuOnClick

Specifies if a menu is closed when a user clicks the item. Does not apply to the root items.

Type:

Boolean

Default Value: true

disabled

Specifies whether the menu item responds to user interaction.

Type:

Boolean

Default Value: false

icon

Specifies the menu item's icon.

Type:

String

This property accepts one of the following:

items

Configures nested context menu items.

Use this property to create a hierarchical context menu. The following code demonstrates an example:

index.js
  • $(function() {
  • $("#htmlEditorContainer").dxHtmlEditor({
  • // ...
  • tableContextMenu: {
  • enabled: true,
  • items: [{
  • text: 'Font Style',
  • items: [
  • 'bold',
  • 'italic',
  • 'underline',
  • 'strike'
  • ]
  • }]
  • }
  • });
  • });

name

A name used to identify the context menu item.

Default Value: undefined

selectable

Specifies whether or not a user can select a menu item.

Type:

Boolean

Default Value: false

selected

Specifies whether or not the item is selected.

Type:

Boolean

Default Value: false

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data:

CollectionWidgetItem

The item object to be rendered.

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Angular and Vue use custom templates instead of the template property. In React, specify the render or component properties.

index.js
  • $(function() {
  • $("#htmlEditorContainer").dxHtmlEditor({
  • // ...
  • tableContextMenu: {
  • items: [
  • {
  • // ...
  • template: '<div>Custom Item</div>'
  • }
  • ]
  • }
  • });
  • });
See Also

text

Specifies the text inserted into the item element.

Type:

String

visible

Specifies whether or not the menu item is visible.

Type:

Boolean

Default Value: true