Blazorise DataGrid: Show Context Menu

Show context menu by right clicking on a DataGrid.


You may need to know which element the user clicked in some cases so that you can use it in command handling. You might also want to change the menu's contents depending on which element the user clicked (e.g., disable or entirely remove some items from the menu based on a condition).


Row Context Menu

To integrate the context menu with the DataGrid, you need to:

  1. Use the grid's RowContextMenu event to get the current row model and show the menu.
  2. Use the context menu's MouseEventArgs parameter to handle the desired operation.

In this example, the context menu is used to show the menu items, put an item in edit mode and delete items.

First Name
Last Name
@using System.Drawing

<DataGrid @ref="@dataGridRef"
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />

@if ( showContextMenu )
    <Div Position="Position.Fixed" Background="Background.Danger" Style="@($"left:{contextMenuPos.X}px;top:{contextMenuPos.Y}px;")">
            <ListGroupItem Clicked="@(()=>OnContextItemEditClicked(contextMenuEmployee))">
                <Icon Name="IconName.Edit" TextColor="TextColor.Secondary" /> Edit
            <ListGroupItem Clicked="@(()=>OnContextItemDeleteClicked(contextMenuEmployee))">
                <Icon Name="IconName.Delete" TextColor="TextColor.Danger" /> Delete
@code {
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;
    private DataGrid<Employee> dataGridRef;

    bool showContextMenu = false;
    Employee contextMenuEmployee;
    Point contextMenuPos;

    protected override async Task OnInitializedAsync()
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();

    protected Task OnRowContextMenu( DataGridRowMouseEventArgs<Employee> eventArgs )
        showContextMenu = true;
        contextMenuEmployee = eventArgs.Item;
        contextMenuPos = eventArgs.MouseEventArgs.Client;

        return Task.CompletedTask;

    protected async Task OnContextItemEditClicked( Employee employee )
        await dataGridRef.Edit( employee );

        showContextMenu = false;

    protected async Task OnContextItemDeleteClicked( Employee employee )
        await dataGridRef.Delete( employee );

        showContextMenu = false;


See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page