CODEWITHSUNDEEP
blazormudblazor
Lorenzo Bertolaccini
Lorenzo Bertolaccini

Reputation: 93

Make a line of a MudBlazor table clickable?

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.

Upvotes: 8

Views: 13402

Answers (1)

yasseros
yasseros

Reputation: 939

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

Upvotes: 13

Related Questions