stavroskasidis / BlazorContextMenu

A context menu component for Blazor !
MIT License
532 stars 58 forks source link

ContextMenuTrigger element is messing with table css rules #138

Closed mhasanunal closed 1 year ago

mhasanunal commented 1 year ago

` @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.

stavroskasidis commented 1 year ago

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>