All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
JS

RichEditBuilder.OnContextMenuShowing(String) Method

Assigns an event handler to a client event that occurs before the context menu is shown.

Namespace: DevExpress.AspNetCore.RichEdit

Assembly: DevExpress.AspNetCore.RichEdit.v20.2.dll

Declaration

public RichEditBuilder OnContextMenuShowing(
    string callback
)

Parameters

Name Type Description
callback String

The name of the JavaScript function or the JavaScript function code used to handle the event.

Returns

Type Description
RichEditBuilder

The builder for the Rich Text Editor.

Remarks

The contextMenu property allows you to customize the Rich Text Editor’s context menu. You can handle the ContextMenuShowingEvent event to additionally modify the menu before it is displayed.

The event handler receives an argument of the ContextMenuShowingEventArgs type. The argument's properties provide information specific to this event.

@(Html.DevExpress().RichEdit("richEdit")
   .OnInit("onInit")
   .OnCustomCommandExecuted("onCustomCommandExecuted")
   .OnContextMenuShowing("onContextMenuShowing")
   ...
)
var customizedOnEventItemId = 'customizedOnEventId';
var googleSearchId = 'googleSearchId';

function onInit(s) {
    s.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem(customizedOnEventItemId, {
        icon: 'coffee', beginGroup: true, text: 'Customized on event', visible: false, disabled: true
    }), 0);
    s.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem(googleSearchId, {
        icon: 'search', beginGroup: true, text: 'Google Search...'
    }), 1);
    s.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.DecreaseParagraphIndent);
    s.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.IncreaseParagraphIndent);
    s.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem(DevExpress.RichEdit.MailMergeTabCommandId.CreateDateField, {
        icon: 'clock', text: 'Insert Date Field'
    }), 1);
}
function onContextMenuShowing(s, e) {
    var characterProperties = s.selection.activeSubDocument.getCharacterProperties(s.selection.intervals[0]);
    if (characterProperties.bold === true || characterProperties.bold === undefined) {
        e.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.Copy);
        e.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.Paste);
        e.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.Cut);
        e.contextMenu.getItem(customizedOnEventItemId).visible = true;
        e.contextMenu.items[0].beginGroup = true;
        e.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem('CutCopy', {
            icon: 'close', text: 'Copy Paste Disabled', disabled: true
        }), 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;
    }
}

Run Demo: Context Menu Customization

You can use the contextMenuShowing property to dynamically add and remove the event's handler on the client side.

See Also