Skip to main content
All docs
V24.1

DxRichEdit.CustomizeContextMenu Event

Allows you to customize the context menu in the Rich Text Editor.

Namespace: DevExpress.Blazor.RichEdit

Assembly: DevExpress.Blazor.RichEdit.v24.1.dll

NuGet Package: DevExpress.Blazor.RichEdit

Declaration

[Parameter]
public EventCallback<IContextMenuItemCollection> CustomizeContextMenu { get; set; }

Parameters

Type Description
IContextMenuItemCollection

The item collection.

Remarks

The CustomizeContextMenu event allows you to access and customize the context menu in the Rich Text Editor. You can customize or remove existing commands or add root-level and nested menu items.

customize-contextmenu-items

Run Demo: Context Menu Customization

Access Item Collections

Access Root-Level Items

The CustomizeContextMenu event’s parameter allows you to access the item collection of the built-in context menu. You can obtain an item by its name or index:

<DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />

@code {
    void OnCustomizeContextMenu(IContextMenuItemCollection items) {
        // Returns the first item
        IContextMenuItem firstItem = items[0];
        // Returns the "Increase Indent" item
        IContextMenuItem increaseIndentItem = items[RichEditContextMenuItemNames.IncreaseIndent];
    }
}

Access Nested Items

Use the Items property to access the item collection for an individual item. You can obtain an item by its name or index:

<DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />

@code {
    void OnCustomizeContextMenu(IContextMenuItemCollection items) {
        IContextMenuItem textWrapMenu = items[RichEditContextMenuItemNames.TextWrapMenu];
        // Returns the first item in the "Text Wrap Menu"
        IContextMenuItem firstItem = textWrapMenu.Items[0];
        // Returns the "Text Wrap Inline" item
        IContextMenuItem wrapInlineItem = textWrapMenu.Items[RichEditContextMenuItemNames.TextWrapInline];
    }
}

Access All Items

Call the Flatten() method to recursively iterate through item collections and collect all root-level and nested items.

The following code snippet removes icons for all items in the context menu (including sub-menus):

<DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu/>

@code {
    void OnCustomizeContextMenu(IContextMenuItemCollection items) {
        foreach (var item in items.Flatten()) {
            item.IconUrl = string.Empty;
        }
    }
}

Add Items

Add Default Items

Add method overloads allow you to add a default item with the specified name to the item collection. The RichEditContextMenuItemNames class contains names of all built-in items. Use properties of this class to obtain default item names.

<DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />

@code {
    void OnCustomizeContextMenu(IContextMenuItemCollection items) {
        // Inserts the "Bring to Front" item at the end of the item collection
        items.Add(RichEditContextMenuItemNames.BringToFront);
        // Inserts the "Bring in Front of Text" item at the first position in the item collection
        items.Add(0, RichEditContextMenuItemNames.BringInFrontOfText);
        var clipboardItem = items.AddCustomItem(0, "Clipboard");
        clipboardItem.BeginGroup = true;
        // Adds default items to the item collection of the inserted item
        clipboardItem.Items.Add(RichEditContextMenuItemNames.CutSelection);
        clipboardItem.Items.Add(RichEditContextMenuItemNames.CopySelection);
        clipboardItem.Items.Add(RichEditContextMenuItemNames.Paste);
    }
}

Add Custom Items

AddCustomItem method overloads allow you to create a custom item and add it to the item collection.

<DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />

@code {
    void OnCustomizeContextMenu(IContextMenuItemCollection items) {
        // Inserts a custom item at the first position in the item collection
        var searchItem = items.AddCustomItem(0, "Google Search...", ...);
        var openHyperlinkItem = items[RichEditContextMenuItemNames.OpenHyperlink];
        openHyperlinkItem.BeginGroup = false;
        var index = items.IndexOf(openHyperlinkItem);
        // Inserts a custom item at the specified position in the item collection
        var showURLItem = items.AddCustomItem(index, "Show URL", ...);
        showURLItem.BeginGroup = true;
        // Inserts a custom item at the second position in the item collection
        var clipboardItem = items.AddCustomItem(1, "Clipboard");
    }
}

Remove Items

Remove method overloads allow you to remove an item with the specified name or index from the item collection. To remove all items from the collection, call the Clear() method.

<DxRichEdit CustomizeContextMenu="OnCustomizeContextMenu"/>

@code {
    void OnCustomizeContextMenu(IContextMenuItemCollection items) {
        // Removes the first item
        items.Remove(0);
        // Removes the "Decrease Indent" item
        items.Remove(RichEditContextMenuItemNames.DecreaseIndent);
        // Removes all items
        items.Clear();
    }
}

Customize Items

Access an item and use its properties to customize availability, appearance, and behavior.

<DxRichEdit CustomizeContextMenu=OnCustomizeContextMenu />

@code {
    Selection selection;
    string textToSearch;
    async Task OnCustomizeContextMenu(IContextMenuItemCollection items) {
        if (selection.Intervals[0].Length > 0) {
            var span = await selection.ActiveSubDocument.GetTextSpanAsync(selection.Intervals[0]);
            textToSearch = span.Text.Trim();
        }
        else
            textToSearch = null;
        var searchItem = items.AddCustomItem(0, "Google Search...", async () => {
            var url = $"https://www.google.com/search?q={HttpUtility.UrlEncode(textToSearch)}";
            await JSRuntime.InvokeVoidAsync("open", url, "_blank");
        });
        searchItem.Enabled = !string.IsNullOrEmpty(textToSearch);
        searchItem.IconCssClass = "search-icon";
        // ...
    }
}
See Also