Skip to main content
All docs
V24.2

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

DxContextMenu.PositionTarget Property

Specifies the target UI element for the context menu.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(null)]
[Parameter]
public string PositionTarget { get; set; }

#Property Value

Type Default Description
String null

The CSS selector that identifies the target UI element.

#Remarks

Use the PositionTarget property to specify the target UI element for the context menu. This property value affects the following methods:

ShowAsync(ContextMenuPosition)
If you leave the PositionTarget property unspecified, this method displays the context menu at the top-left corner of a web page.
ShowAsync(Double, Double)
If you leave the PositionTarget property unspecified, this method displays the context menu at the coordinates passed as method parameters.
ShowAsync(Double, Double, ContextMenuPosition)
If you leave the PositionTarget property unspecified, this method displays the context menu at the coordinates passed as method parameters.

The following code example defines the target element by its CSS class:

Razor
<style>
    .context-menu-container {
        margin-top: 100px;
        height: 50px;
        width: 200px;
        border: 1px solid black;
    }
</style>

<DxButton Text="Show Context Menu" 
          Click="() => ContextMenu.ShowAsync(ContextMenuPosition.Top)" />

<div class="context-menu-container"
     @oncontextmenu:preventDefault>
    <span style="font-weight: 600">RIGHT-CLICK TO SHOW THE CONTEXT MENU</span>
</div>

<DxContextMenu @ref="ContextMenu"
               PositionTarget=".context-menu-container">
    <Items>
        <DxContextMenuItem Text="Open" />
        <DxContextMenuItem Text="Copy" />
        <DxContextMenuItem Text="Delete" />
    </Items>
</DxContextMenu>

@code {
    DxContextMenu ContextMenu { get; set; }
}

See Also