How to detect a double click on a table row in MudBlazor?

user_13241545 0
Viewed 1974

I am using MudBlazor and I would like to detect a double click on a single table row and react to the event. However, there is no double click listed in the API of the table. The single click is easy to do with the OnRowClick callback (see also here on SO). There is no equivalent for double clicks.

I tried using the Blazor event ondblclick with

<MudTd @ondblclick="OnOrderDbClicked">
    // ...
<MudTd/>

I have two issues with this:

  1. I can catch the double click. But I cannot make it aware of the row that was clicked (for which I'd have a workaround).
  2. Also I'd have to add to to each cell because the <RowTemplate/> element just won't accept it.

I only have a crutch for issue 1: Bind a variable MyOrderVM MyItem to the SelectedItem item parameter of the table and access the object in the method that is called by the double click (because a double click also causes two single clicks which select the item).

I haven't done a lot of testing but it seems this could work but isn't there a better solution? Or do I worry to much about side effects?

mudblazor blazor asp.net c#
2 Answers

As you have said, currently there is no out-of-the-box way like with OnRowClick for double click. However, feel free to create an issue in the repo.

As a workaround, you could use your method 1 with a little adaption to stop the propagation of the click event to the MudTable. I think this way is easier to understand than the detour over the SelectedItem

<MudTd>
  // the click is handled by the div and not bubbling up to the MudTd
  <div @onclick="@EmptyCallback" @onclick:stopPropagation="true" 
              @ondblclick="@( (x) => DoSomething(context))" >
     // ...
  </div>
<MudTd/>

Here is a MudBlazor Playground to show it.

Disclaimer:

I'm a contributor to MudBlazor

user_146255930

There is an EventCallback ondblclick in MudTd. You can call that and pass a method with your desired parameter. See the sample code below.

<RowTemplate>
   <MudTd @ondblclick="@( (x) => DoubleClickEvent(context))">
      @context.SomeItem
   </MudTd>
</RowTemplate>

Create a method in the @code section, and name it as you named it in the Callback. See the sample code below.

private void DoubleClickEvent(ContextModel model)
{
   // Do something with the model.
}

I hope it helps someone.

user_110671980
Related