ContextMenuItem Class

A context menu item.

Declaration

export class ContextMenuItem

constructor(id, options)

Initializes a new instance of the ContextMenuItem class with specified settings.

Declaration

constructor(
    id: CommandId | string,
    options: IContextMenuItemOptions
)

Parameters

Name	Type	Description
id	CommandId | string	The item identifier.
options	IContextMenuItemOptions	An object that implements the IContextMenuItemOptions interface and contains context menu item settings.

Remarks

JS

richEdit.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem
    (DevExpress.RichEdit.MailMergeTabCommandId.CreateDateField, 
    {icon: 'clock', text: 'Insert Date Field', beginGroup: true}), 0);

Run Demo: Context Menu Customization

Properties

beginGroup Property

Specifies whether an item separator should be displayed before the current item.

Declaration

beginGroup: boolean

Property Value

Type	Description
boolean	true, to display a separator before the item; otherwise, false.

Remarks

JS

richEdit.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem
    (DevExpress.RichEdit.MailMergeTabCommandId.CreateDateField, 
    {icon: 'clock', text: 'Insert Date Field', beginGroup: true}), 0);

Result:

disabled Property

Specifies whether the context menu item is disabled.

Declaration

disabled: boolean

Property Value

Type	Description
boolean	true, to disable the item; otherwise, false.”

Remarks

JS

function onInit(s) {
    s.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem
    (DevExpress.RichEdit.HomeTabCommandId.DecreaseFontSize, {
        icon: 'minus', text: 'Decrease Font Size',
    }), 0);
}
function onContextMenuShowing(s, e) {
    var characterProperties = s.selection.activeSubDocument.getCharacterProperties(s.selection.intervals[0]);
    if (characterProperties.size < 10) {
        e.contextMenu.getItem(DevExpress.RichEdit.HomeTabCommandId.DecreaseFontSize).disabled = true;
    }
};

The disable property is not in effect for default context menu items because their availability is determined by the control automatically.

icon Property

Specifies the item icon’s identifier.

Declaration

icon?: string

Property Value

Type	Description
string	An icon identifier.

Remarks

JS

richEdit.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem
    (DevExpress.RichEdit.MailMergeTabCommandId.CreateDateField, 
    {icon: 'clock', text: 'Insert Date Field', beginGroup: true}), 0);

id Property

Specifies the context menu item identifier.

Declaration

id: CommandId | string

Property Value

Type	Description
CommandId	The command identifier.
string	A custom command identifier.

Remarks

JS

var googleSearchId = 'googleSearchId';

function onInit(s) {
    s.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem(googleSearchId, {
        icon: 'search', beginGroup: true,
    }), 0);
    s.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem(DevExpress.RichEdit.MailMergeTabCommandId.CreateDateField, {
        icon: 'clock', text: 'Insert Date Field'
    }), 1);
    ...
}

function onCustomCommandExecuted(s, e) {
    switch (e.commandName) {
        case googleSearchId:
            var selectedText = s.selection.activeSubDocument.getText(s.selection.intervals[0]);
            window.open("https://www.google.com/search?q=" + selectedText, "_blank");
            break;
    }
}

items Property

Provides access to an array of the item’s sub-items.

Declaration

items?: ContextMenuItem[]

Property Value

Type	Description
ContextMenuItem[]	An array of sub-items.

Remarks

JS

var item1 = new DevExpress.RichEdit.ContextMenuItem(DevExpress.RichEdit.HomeTabCommandId.IncreaseFontSize,
  {icon: 'plus', text: 'Increase' });
var item2 = new DevExpress.RichEdit.ContextMenuItem(DevExpress.RichEdit.HomeTabCommandId.DecreaseFontSize,
  { icon: 'minus', text: 'Decrease' });
richEdit.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem('item', 
  {icon: 'chevronnext', text: 'Font Size', items: [item1, item2],}), 0);

localizationId Property

Specifies an identifier that allows you to localize the item’s text.

Declaration

localizationId?: string

Property Value

Type	Description
string	The item’s localization identifier.

Remarks

If the text property is specified, the item is not localized.

text Property

Specifies the item text.

Declaration

text: string

Property Value

Type	Description
string	The item text.

Remarks

JS

richEdit.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem
    (DevExpress.RichEdit.MailMergeTabCommandId.CreateDateField, 
    {icon: 'clock', text: 'Insert Date Field', beginGroup: true}), 0);

visible Property

Specifies whether the item is visible in the context menu.

Declaration

visible: boolean

Property Value

Type	Description
boolean	true, to display the item; otherwise, false.

Remarks

JS

function onInit(s) {
    s.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem
    (DevExpress.RichEdit.HomeTabCommandId.DecreaseFontSize, {
        icon: 'minus', text: 'Decrease Font Size',
    }), 0);
}
function onContextMenuShowing(s, e) {
    var characterProperties = s.selection.activeSubDocument.getCharacterProperties(s.selection.intervals[0]);
    if (characterProperties.size < 10) {
        e.contextMenu.getItem(DevExpress.RichEdit.HomeTabCommandId.DecreaseFontSize).visible = false;
    }
};

The visible property is not in effect for default context menu items because their availability is determined by the control automatically.