Show DetailRow on RowDoubleClicked Blazorise DataGrid

Question

I use Blazorise DataGrid component to show my master/detail data in which you click master row and DataGrid shows detail row/rows.

How can one use the feature of RowDoubleClicked and change the natural behavior of DataGrid, to show detail row/rows when the event fires?

Answer 1

Visibility of detail row is handled by DetailRowTrigger. In the Blazorise demo for simplicity it is triggered only on selected row change, eg.

<DataGrid TItem="Employee"
    @bind-SelectedRow="@selectedEmployee"
    DetailRowTrigger="@((item)=>item.Id == selectedEmployee?.Id)">

To modify it to work with double click, you need to use DetailRowTrigger and save the selected id or item to a field so you can check for it within DetailRowTrigger handler.

<DataGrid TItem="Employee"
    RowDoubleClicked="@(e=>selectedIdOnDoubleClick = e.Item.Id)"
    DetailRowTrigger="@((item)=>item.Id == selectedEmployee?.Id)">
@code{
    private int selectedIdOnDoubleClick ;
}