CODEWITHSUNDEEP
c#asp.netblazormudblazor
Jan
Jan

Reputation: 5284

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

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?

Upvotes: 4

Views: 6118

Answers (3)

Markus Sellhorn
Markus Sellhorn

Reputation: 111

UPDATE:
For people finding this on their search, MudBlazor does have a indicator for double clicks now.

It is not an explixit parameter, but rather part of the OnRowClick parameter. In the TableRowClickEventArgs it providers, there is a property MouseEventArgs that has a property Detail. The documentation to this property state:

A count of consecutive clicks that happened in a short amount of time, incremented by one.

So by checking this against 2 you can react to double clicks. I´ve used this in my own application and can confirm this works.

Upvotes: 11

Tanzib
Tanzib

Reputation: 13

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.

Upvotes: 1

Just the benno
Just the benno

Reputation: 2601

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

Upvotes: 9

Related Questions