Vue HtmlEditor - tableContextMenu.items

Configures context menu items.

Selector: DxItem
Accepted Values: 'background' | 'bold' | 'color' | 'font' | 'italic' | 'link' | 'image' | 'strike' | 'subscript' | 'superscript' | 'underline' | 'blockquote' | 'increaseIndent' | 'decreaseIndent' | 'orderedList' | 'bulletList' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'codeBlock' | 'variable' | 'undo' | 'redo' | 'clear' | 'insertTable' | 'insertHeaderRow' | 'insertRowAbove' | 'insertRowBelow' | 'insertColumnLeft' | 'insertColumnRight' | 'deleteColumn' | 'deleteRow' | 'deleteTable' | 'cellProperties' | 'tableProperties'

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.

App.vue
  • <template>
  • <DxHtmlEditor>
  • <DxTableContextMenu
  • :enabled="true">
  • <DxTableContextMenuItem name="insertHeaderRow" />
  • <DxTableContextMenuItem name="insertRowAbove" />
  • <DxTableContextMenuItem name="insertRowBelow" />
  • <DxTableContextMenuItem name="insertColumnLeft" :begin-group="true" />
  • <DxTableContextMenuItem name="insertColumnRight" />
  • <DxTableContextMenuItem name="deleteColumn" :begin-group="true" />
  • <DxTableContextMenuItem name="deleteRow" />
  • <DxTableContextMenuItem name="deleteTable" />
  • <DxTableContextMenuItem name="cellProperties" :begin-group="true" />
  • <DxTableContextMenuItem name="tableProperties" />
  • </DxTableContextMenu>
  • </DxHtmlEditor>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxHtmlEditor, {
  • DxTableContextMenu,
  • DxTableContextMenuItem
  • } from 'devextreme-vue/html-editor';
  •  
  • export default {
  • components: {
  • DxHtmlEditor,
  • DxTableContextMenu,
  • DxTableContextMenuItem
  • },
  • // ...
  • }
  • </script>

beginGroup

Specifies whether a group separator is displayed over the item.

Selector: begin-group
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.

Selector: close-menu-on-click
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.

Selector: DxItem
Accepted Values: 'background' | 'bold' | 'color' | 'font' | 'italic' | 'link' | 'image' | 'strike' | 'subscript' | 'superscript' | 'underline' | 'blockquote' | 'increaseIndent' | 'decreaseIndent' | 'orderedList' | 'bulletList' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'codeBlock' | 'variable' | 'undo' | 'redo' | 'clear' | 'insertTable' | 'insertHeaderRow' | 'insertRowAbove' | 'insertRowBelow' | 'insertColumnLeft' | 'insertColumnRight' | 'deleteColumn' | 'deleteRow' | 'deleteTable' | 'cellProperties' | 'tableProperties'

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

App.vue
  • <template>
  • <DxHtmlEditor>
  • <DxTableContextMenu
  • :enabled="true">
  • <DxTableContextMenuItem
  • text="Font Style">
  • <DxTableContextMenuItem name="bold" />
  • <DxTableContextMenuItem name="italic" />
  • <DxTableContextMenuItem name="underline" />
  • <DxTableContextMenuItem name="strike" />
  • </DxTableContextMenuItem>
  • </DxTableContextMenu>
  • </DxHtmlEditor>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxHtmlEditor, {
  • DxTableContextMenu,
  • DxTableContextMenuItem
  • } from 'devextreme-vue/html-editor';
  •  
  • export default {
  • components: {
  • DxHtmlEditor,
  • DxTableContextMenu,
  • DxTableContextMenuItem
  • },
  • // ...
  • }
  • </script>

name

A name used to identify the context menu item.

Type:

String

Default Value: undefined
Accepted Values: 'background' | 'bold' | 'color' | 'font' | 'italic' | 'link' | 'image' | 'strike' | 'subscript' | 'superscript' | 'underline' | 'blockquote' | 'increaseIndent' | 'decreaseIndent' | 'orderedList' | 'bulletList' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'codeBlock' | 'variable' | 'undo' | 'redo' | 'clear' | 'insertTable' | 'insertHeaderRow' | 'insertRowAbove' | 'insertRowBelow' | 'insertColumnLeft' | 'insertColumnRight' | 'deleteColumn' | 'deleteRow' | 'deleteTable' | 'cellProperties' | 'tableProperties'

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.

App.vue
  • <template>
  • <DxHtmlEditor>
  • <DxTableContextMenu>
  • <DxItem ...>
  • <div>Custom Item</div>
  • </DxItem>
  • </DxTableContextMenu>
  • </DxHtmlEditor>
  • </template>
  •  
  • <script>
  •  
  • import DxHtmlEditor, {
  • DxContextMenu, DxItem
  • } from 'devextreme-vue/html-editor';
  •  
  • export default {
  • components: {
  • DxHtmlEditor,
  • DxContextMenu,
  • DxItem
  • },
  • // ...
  • }
  • </script>
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