Skip to main content
All docs
V25.1
  • DxContextMenu.ShowAsync(Double, Double, ContextMenuPosition) Method

    Displays the Context Menu with custom horizontal and vertical offsets from one of the base positions in relation to the target UI element.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public Task ShowAsync(
        double x,
        double y,
        ContextMenuPosition position
    )

    Parameters

    Name Type Description
    x Double

    Specifies the horizontal offset (in pixels) from the base Context Menu position.

    y Double

    Specifies the vertical offset (in pixels) from the base Context Menu position.

    position ContextMenuPosition

    An enumeration value.

    Returns

    Type Description
    Task

    The task completed when the context menu is displayed.

    Remarks

    Call this method to show the context menu next to the target UI element with the (x,y) shift. Use the PositionTarget property to specify this element.

    The following example displays the context menu at the right edge of the <div> element and additionally shifts the menu down by 25 pixels:

    <style>
        .context-menu {
            margin-top: 15px;
            height: 50px;
            width: 200px;
            border: 1px solid black;
        }
    </style>
    
    <DxButton Text="Show Context Menu" Click="() => ContextMenu.ShowAsync(0, 25, ContextMenuPosition.Right)" />
    
    <div class="context-menu"
         @oncontextmenu:preventDefault>
        <span style="font-weight: 600">RIGHT-CLICK TO SHOW THE CONTEXT MENU</span>
    </div>
    
    <DxContextMenu @ref="ContextMenu"
                   PositionTarget=".context-menu">
        <Items>
            <DxContextMenuItem Text="Open" />
            <DxContextMenuItem Text="Copy" />
            <DxContextMenuItem Text="Delete" />
        </Items>
    </DxContextMenu>
    
    @code {
        DxContextMenu ContextMenu { get; set; }
    }
    

    Context menu: relative position with shift

    To execute custom code when the context menu is displayed, handle the Shown event. Call the HideAsync() method to hide the context menu.

    Run Demo: Context Menu

    See Also