Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

ContextMenuItem Class

A context menu item.

#Declaration

TypeScript
export class ContextMenuItem

#constructor(id, options)

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

#Declaration

TypeScript
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

TypeScript
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

TypeScript
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

TypeScript
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

TypeScript
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

TypeScript
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

TypeScript
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

TypeScript
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

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