stavroskasidis/BlazorContextMenu

ContextMenuTrigger element is messing with table css rules

mhasanunal opened this issue · 1 comments

` @foreach (var item in Results.Hits)
{

                                var mem = new Sys.SizeOnDisk(item.Source.Length);
                                if (item.Source == SelectedRow)
                                {
                                    colorCls = "bg-primary text-white";
                                }
                                <ContextMenuTrigger MenuId="myMenu" Data="@item">
                                    <tr class="@colorCls" @onclick="()=>{SelectedRow=item.Source;}">
                                        <td >
                                            @(counter++)
                                        </td>
                                        <td>
                                            @item.Id
                                        </td>
                                        <td >
                                            @mem
                                        </td>
                                        <td >
                                            <button>asd</button>
                                        </td>
                                    </tr>
                                </ContextMenuTrigger>
                            }`

As you can see, I want to select whole row, and then create context menu for that @item entity.
If you put "ContextMenuTrigger" under "td" elements there is no issue of course but, when user clicks the "tr" element
my context menu won't show up as you would expect.

So, if this is possible, we should be able to bind the context menu to targeting element by:

<tr class="@colorCls" @oncontextmenu="()=>{myMenuReference.TriggerFor(item)}" @onclick="()=>{SelectedRow=item.Source;}">

or something like this, instead of whole new element.

You can have the ContextMenuTrigger rendered as a tr

<ContextMenuTrigger WrapperTag="tr" MenuId="myMenu" Data="@item">
   <td >
         @(counter++)
    </td>
    <td>
        @item.Id
     </td>
      <td >
         @mem
      </td>
       <td >
          <button>asd</button>
        </td>
</ContextMenuTrigger>