Back to Devexpress

IContextMenuItem Interface

blazor-devexpress-dot-blazor-1a119aab.md

latest9.3 KB
Original Source

IContextMenuItem Interface

A context menu item in the Rich Text Editor, Grid, or TreeList.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
public interface IContextMenuItem

The following members return IContextMenuItem objects:

Show 13 links

Remarks

The IContextMenuItem interface defines a context menu item. Use interface properties to specify the item’s availability, appearance, and behavior.

Refer to CustomizeContextMenu event descriptions for additional information and examples:

Examples

The following code snippets customize context menu items:

RichEdit

razor
<DxRichEdit CustomizeContextMenu="CustomizeContextMenu" />

@code {
    DxPopup popup;
    Selection selection;
    string textToSearch;
    string link;
    // ...
    async Task CustomizeContextMenu(IContextMenuItemCollection items) {
        if (selection.Intervals[0].Length > 0) {
            var span = await selection.ActiveSubDocument.GetTextSpanAsync(selection.Intervals[0]);
            textToSearch = span.Text.Trim();
        }
        else
            textToSearch = null;
        // Adds and configures a custom Google Search item
        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";
        var hyperlinks = await selection.ActiveSubDocument.Hyperlinks.GetAllAsync();
        var hyperlink = hyperlinks.SingleOrDefault(h => Enumerable.Range(h.Interval.Start, h.Interval.Length).Contains(selection.CaretPosition));
        link = hyperlink?.Url;
        if (!string.IsNullOrEmpty(link)) {
            var openHyperlinkItem = items[RichEditContextMenuItemNames.OpenHyperlink];
            openHyperlinkItem.BeginGroup = false;
            var index = items.IndexOf(openHyperlinkItem);
            var showURLItem = items.AddCustomItem(index, "Show URL");
            showURLItem.Click = async () => {
                if (popup is not null)
                    await popup.ShowAsync();
            };
            showURLItem.BeginGroup = true;
        }
        // Removes built-in items
        items.Remove(RichEditContextMenuItemNames.CutSelection);
        items.Remove(RichEditContextMenuItemNames.CopySelection);
        items.Remove(RichEditContextMenuItemNames.Paste);
        // Adds a custom Clipboard item
        var clipboardItem = items.AddCustomItem(1, "Clipboard");
        clipboardItem.BeginGroup = true;
        // Adds built-in nested items
        clipboardItem.Items.Add(RichEditContextMenuItemNames.CutSelection);
        clipboardItem.Items.Add(RichEditContextMenuItemNames.CopySelection);
        clipboardItem.Items.Add(RichEditContextMenuItemNames.Paste);
    }
}
css
.search-icon {
    background-color: currentColor;
    width: 16px;
    height: 16px;
    mask-image: url("../images/icons/search.svg");
    -webkit-mask-image: url("../images/icons/search.svg");
    opacity: 0.6;
}

Run Demo

Grid

razor
<DxGrid ContextMenus="GridContextMenus.All" CustomizeContextMenu="CustomizeContextMenu">
    @* ... *@
</DxGrid>

@code {
    void CustomizeContextMenu(GridCustomizeContextMenuEventArgs args) {
    // Hides icons for all built-in commands
        foreach(var item in args.Items)
            item.IconUrl = string.Empty;   
        if (args.Context is GridHeaderCommandContext headerContext) {
            // Removes the "Sort Column Descending" item
            args.Items.Remove(GridContextMenuDefaultItemNames.SortColumnDescending);
            // Changes the "Sort Column Ascending" item caption
            args.Items[GridContextMenuDefaultItemNames.SortColumnAscending].Text = "Sort";
            // Adds and configures a custom command for the command column header
            if (headerContext.Column is IGridCommandColumn commandColumn) {
                var isFixed = commandColumn.FixedPosition != GridColumnFixedPosition.None;
                string itemText = isFixed ? "Unfix Column" : "Fix Column to the Left";
                var newValue = isFixed ? GridColumnFixedPosition.None : GridColumnFixedPosition.Left;

                var fixColumnItem = args.Items.AddCustomItem(itemText, () => {
                    headerContext.Grid.BeginUpdate();
                    headerContext.Column.FixedPosition = newValue;
                    headerContext.Grid.EndUpdate();
                });
                fixColumnItem.BeginGroup = true;
            }
        }
    }
}

Run Demo

TreeList

razor
<DxTreeList ContextMenus="TreeListContextMenus.All" CustomizeContextMenu="CustomizeContextMenu">
    @* ... *@
</DxTreeList>

@code {
    void CustomizeContextMenu(TreeListCustomizeContextMenuEventArgs args) {
        // Hides icons for all built-in commands
        foreach(var item in args.Items)
            item.IconUrl = string.Empty;   
        if (args.Context is TreeListHeaderCommandContext headerContext) {
            // Removes the "Sort Column Descending" item
            args.Items.Remove(TreeListContextMenuDefaultItemNames.SortColumnDescending);
            // Changes the "Sort Column Ascending" item caption
            args.Items[TreeListContextMenuDefaultItemNames.SortColumnAscending].Text = "Sort";
            // Adds and configures a custom command for the command column header
            if (headerContext.Column is ITreeListCommandColumn commandColumn) {
                var isFixed = commandColumn.FixedPosition != TreeListColumnFixedPosition.None;
                string itemText = isFixed ? "Unfix Column" : "Fix Column to the Left";
                var newValue = isFixed ? TreeListColumnFixedPosition.None : TreeListColumnFixedPosition.Left;

                var fixColumnItem = args.Items.AddCustomItem(itemText, () => {
                    headerContext.TreeList.BeginUpdate();
                    headerContext.Column.FixedPosition = newValue;
                    headerContext.TreeList.EndUpdate();
                });
                fixColumnItem.BeginGroup = true;
            }
        }
    }
}

Run Demo

See Also

IContextMenuItem Members

DevExpress.Blazor Namespace