Angular 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.

app.component.html
  • <dx-html-editor>
  • <dxo-table-context-menu
  • [enabled]="true">
  • <dxi-item name="insertHeaderRow"></dxi-item>
  • <dxi-item name="insertRowAbove"></dxi-item>
  • <dxi-item name="insertRowBelow"></dxi-item>
  • <dxi-item name="insertColumnLeft" [beginGroup]="true"></dxi-item>
  • <dxi-item name="insertColumnRight"></dxi-item>
  • <dxi-item name="deleteColumn" [beginGroup]="true"></dxi-item>
  • <dxi-item name="deleteRow"></dxi-item>
  • <dxi-item name="deleteTable"></dxi-item>
  • <dxi-item name="cellProperties" [beginGroup]="true"></dxi-item>
  • <dxi-item name="tableProperties"></dxi-item>
  • </dxo-table-context-menu>
  • </dx-html-editor>

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:

app.component.html
  • <dx-html-editor>
  • <dxo-table-context-menu
  • [enabled]="true">
  • <dxi-item text="Font Style">
  • <dxi-item name="bold"></dxi-item>
  • <dxi-item name="italic"></dxi-item>
  • <dxi-item name="underline"></dxi-item>
  • <dxi-item name="strike"></dxi-item>
  • </dxi-item>
  • </dxo-table-context-menu>
  • </dx-html-editor>

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.

app.component.html
app.component.ts
app.module.ts
  • <dx-html-editor ... >
  • <dxo-table-context-menu>
  • <dxi-item ...>
  • <div *dxTemplate>
  • <div>Custom Item</div>
  • </div>
  • </dxi-item>
  • </dxo-table-context-menu>
  • </dx-html-editor>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • // ...
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxHtmlEditorModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxHtmlEditorModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
See Also

text

Specifies the text inserted into the item element.

Type:

String

If you use both this property and a template, the template overrides the text.

visible

Specifies whether or not the menu item is visible.

Type:

Boolean

Default Value: true