Skip to main content

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 string | CommandId

The item identifier.

options IContextMenuItemOptions

An object that implements the IContextMenuItemOptions interface and contains context menu item settings.

Remarks

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

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

Result:

Included Controls

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

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

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
string

A custom command identifier.

CommandId

The command identifier.

Remarks

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

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.

See Also

text Property

Specifies the item text.

Declaration

text: string

Property Value

Type Description
string

The item text.

Remarks

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

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.