I want to use MudMenu as a context menu for MudTable. After several attempts, I found two cases where MudMenu works but still has issues:
Case 1: MudMenu is placed inside , with surrounding the columns. MudMenu works correctly, opening the menu at the row position of the mouse cursor. However, the columns become distorted and no longer align with the header, and the rows do not align correctly between diffirent rows:
<MudTable Class="mt-3" Dense Bordered Height="465px"
ReadOnly="false" HeaderClass="pa-1" Items="dt.Select()"
T="DataRow" MultiSelection="false" RowClass="pa-0 cursor-pointer" Hover="true" Breakpoint="Breakpoint.None">
<ToolBarContent>
<MudText Typo="Typo.h6">Test table</MudText>
</ToolBarContent>
<HeaderContent>
<MudTh Style="text-align:center; white-space:nowrap;"> Date </MudTh>
<MudTh Style="text-align:center; white-space:nowrap;"> Name </MudTh>
<MudTh Style="text-align:center; white-space:nowrap;"> ID </MudTh>
<MudTh></MudTh>
</HeaderContent>
<RowTemplate>
<MudMenu PositionAtCursor="true" ActivationEvent="MouseEvent.RightClick">
<ActivatorContent>
<MudTd DataLabel="Date"> @(DateTime.Parse(context["Date"].ToString()).ToString("dd/MM/yyyy"))</MudTd>
<MudTd DataLabel="Name"> @context["Name"].ToString()</MudTd>
<MudTd DataLabel="ID" Style="padding:9px"> @context["ID"].ToString()</MudTd>
</ActivatorContent>
<ChildContent>
<MudMenuItem>Open Menu</MudMenuItem>
</ChildContent>
</MudMenu>
</RowTemplate>
</MudTable>
Case 2: MudMenu is placed outside MudTable, with surrounding the entire table. MudMenu works, and the table looks fine, but the menu opens in a different position from the mouse cursor, often outside the table content area:
<MudMenu PositionAtCursor="true" ActivationEvent="MouseEvent.RightClick">
<ActivatorContent>
<MudTable Class="mt-3" Dense Bordered Height="465px"
ReadOnly="false" HeaderClass="pa-1" Items="dt.Select()"
T="DataRow" MultiSelection="false" RowClass="pa-0 cursor-pointer" Hover="true" Breakpoint="Breakpoint.None">
<ToolBarContent>
<MudText Typo="Typo.h6">Test table</MudText>
</ToolBarContent>
<HeaderContent>
<MudTh Style="text-align:center; white-space:nowrap;"> Date </MudTh>
<MudTh Style="text-align:center; white-space:nowrap;"> Name </MudTh>
<MudTh Style="text-align:center; white-space:nowrap;"> ID </MudTh>
<MudTh></MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Date"> @(DateTime.Parse(context["Date"].ToString()).ToString("dd/MM/yyyy"))</MudTd>
<MudTd DataLabel="Name"> @context["Name"].ToString()</MudTd>
<MudTd DataLabel="ID" Style="padding:9px"> @context["ID"].ToString()</MudTd>
</RowTemplate>
</MudTable>
</ActivatorContent>
<ChildContent>
<MudMenuItem>Open Menu</MudMenuItem>
</ChildContent>
</MudMenu>
How can I fix these issues? Is there another way to create a context menu in this scenario?
The problem is, that the Element MudTd has only the correct layout as Cell if it’s a direct child of RowTemplate. That’s why for your second case the layout works.
You have to define a MudMenu for each cell. (I don’t think there’s a way around but, but hopefully someone knows how to).
<RowTemplate>
<MudTd DataLabel="Date">
<MudMenu PositionAtCursor="true" ActivationEvent="MouseEvent.RightClick" Style="@MenuStyle()">
<ActivatorContent>
@context.Name
</ActivatorContent>
<ChildContent>
<MudMenuChildContent />
</ChildContent>
</MudMenu>
</MudTd>
<MudTd DataLabel="Number" Style="@CellStyle()">
<MudMenu PositionAtCursor="true" ActivationEvent="MouseEvent.RightClick" Style="@MenuStyle()">
<ActivatorContent>
@context.Number
</ActivatorContent>
<ChildContent>
<MudMenuChildContent />
</ChildContent>
</MudMenu>
</MudTd>
<MudTd DataLabel="Position" Style="@CellStyle()">
<MudMenu PositionAtCursor="true" ActivationEvent="MouseEvent.RightClick" Style="@MenuStyle()">
<ActivatorContent>
@context.Position
</ActivatorContent>
<ChildContent>
<MudMenuChildContent />
</ChildContent>
</MudMenu>
</MudTd>
</RowTemplate>
(For this example I used the items on Class Element, proved by the various MudBlazor examples)
Here’s a snippet: MudBlazor snippet