Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

MudMenu does not work correctly with MudTable

$
0
0

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?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>