Make a line of a MudBlazor table clickable?

Question

I have this table made with MudBlazor:

<MudTable ServerData="@(new Func<TableState, Task<TableData<DossierInfo>>>(GetServerData))"
      RowsPerPage="@_PageSize"
      Dense="true"
      Hover="true"
      Bordered="false"
      Striped="true"
      Outlined="true"
      Filter="new Func<DossierInfo,bool>(FilterFunc)" Elevation="0">
<ToolBarContent>
    <MudTextField @bind-Value="searchString" Label="Ricerca" Placeholder="Digitare il testo da ricercare" Variant="Variant.Filled" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" />
    <!--<MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium"></MudTextField>-->
</ToolBarContent>
<HeaderContent>
    <MudTh>Tipo</MudTh>
    <MudTh>Nr</MudTh>
    <MudTh>Targa</MudTh>
    <MudTh>Tipo veicolo</MudTh>
    <MudTh>Marca</MudTh>
    <MudTh>Modello</MudTh>
    <MudTh>Km</MudTh>
    <MudTh>Totale validato</MudTh>
    <MudTh>Data apertura OL</MudTh>
    <MudTh></MudTh>
</HeaderContent>

<RowTemplate>
    <MudTd DataLabel="Tipo pratica"><MudIcon Icon="@DossierTypeIconService.GetDossierTypeIcon(context.Type)"></MudIcon></MudTd>
    <MudTd DataLabel="Numero">@context.Number</MudTd>
    <MudTd DataLabel="Targa">@context.VehiclePlate</MudTd>
    <MudTd DataLabel="Tipo veicolo">@context.VehicleType</MudTd>
    <MudTd DataLabel="Marca">@context.VehicleMake</MudTd>
    <MudTd DataLabel="Modello">@context.VehicleModel</MudTd>
    <MudTd DataLabel="Km">@context.VehicleKm</MudTd>
    <MudTd DataLabel="Totale validato">@context.ValidatedTotalAmount</MudTd>
    <MudTd DataLabel="Data apertura OL">@context.OpenedDate</MudTd>
    <MudTd DataLabel="Azioni" Style="text-align:right">
        <MudButton Variant="Variant.Filled" DisableElevation="true" Color="Color.Primary" Size="Size.Small" OnClick="@((e) => ToDossierDetail(@context.Id))"><strong>Apri</strong></MudButton>
    </MudTd>
</RowTemplate>

<PagerContent>
    <MudTablePager PageSizeOptions="@_pageSizeOption" RowsPerPageString="Pratiche per pagina" />
</PagerContent>

I don't know if it's possible, but I'd like to make each line of the table entirely clickable to access each dossier's information, instead of using the MudButton as it is now. I've searched on the main MudBlazor site but I didn't find anything about this.

Vadnais

Answer 1

You can use the eventcallback OnRowClick.

An example:

<MudTable 
  ServerData="@(new Func<TableState, Task<TableData<DossierInfo>>>(GetServerData))" 
  T="YourT" 
  OnRowClick="@RowClicked">

  // ...

</MudTable>

Code :

public void RowClicked(TableRowClickEventArgs<YourT> p)
{
  // Example:
  NavigationManager.NavigateTo($"/DossierInfo/{p.Item.IdDossier}");
}

Full API docs for MudTable<T>: https://mudblazor.com/api/table

Pistol

it seems to work, but when i put the function on the onrwoclick wht should i put between the @rowclicked() parenteses? – Vadnais

Nothing. Read about delegates and events+_(callback) to understand how they works – Pistol

the fact is if I put it like this it gives me an error where it says it can't convert from a "group of methonds" into "EventCallback" – Vadnais

did you replace "YourT" with the appropriate type ? – Pistol

i think so, i've put DossierInfo in it, that is the type that is present in TableData<DossierInfo>. I've looked at other examples online and they all put in it the one type that is in the TableData field. Sorry but I'm pretty new to the language so I'm not that good at it. – Vadnais

@LorenzoBertolaccini check if you have the property T="YourT" in the <MudTable> tag – Devy

Thanks Alexandre, for me it was missing the T="yourType" int the <MudTable>. async call working as expected now: OnRowClick="((e) => GetRelationFromSelectedRow(e))" – Gantrisin