MudBlazor MudTable MultiSelection and additional CheckBoxes - I am going crazy

Question

I am using the MudBlazor library in a Blazor app (I wish I wasn't but hey) and I have a razor page that contains a MudBlazor MudTable that has MultiSelection enabled. This generates checkboxes by default which is fine. These checkboxes are used for selecting multiple rows to compare.

I now have a requirement where I need to add an additional checkbox to this table for each row to be able to switch off/on an option for each row.

I am going crazy trying to work out how to do this and my knowledge of Blazor in general is very, very minimal, MudBlazor library even less so.

I have tried using MudCheckBox and MudSwitch and various combinations of options.

I was originally thinking of performing a DB update immediately when a checkbox was selected and tried these

<MudCheckBox @bind-Checked="@context.Keep" @onchange="async v => await OnKeepChanged(context.Id, v)"></MudCheckBox>

<MudCheckBox T="bool" Checked="@context.Keep" CheckedChanged="async evtArgs => await OnKeepChangedAsync(context.Id, evtArgs)"></MudCheckBox>

<MudSwitch T="bool" accesskey="@context.Id" Color="Color.Success" CheckedChangeds="evtArgs => OnKeepChanged(context.Id, evtArgs)" />

What happens is that when a checkbox is selected it does retain the state but does show the originally generated checkbox as checked, I am guessing this is because the rowSelected is being fired?

In my MudSwitch example then this doesnt trigger the CheckedChanged unless I make the call async.

I have gone round and round in circles trying to find some way to be able to add an additional checkbox to a MudTable that either does or does not use 2-way binding so any help woul dbe greatly appreciated.

Answer 1

Here's a demo using the MudBlazor template and the WeatherForecast Mud Table.

A revised WeatherForecast:

public class WeatherForecast
{
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    public string? Summary { get; set; }
    public bool Enabled { get; set; } = true;
}

And the FetchData page:

@page "/fetchdata"
@using SO74825013.Data
@inject WeatherForecastService ForecastService

<PageTitle>Weather forecast</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Weather forecast</MudText>
<MudText Class="mb-8">This component demonstrates fetching data from the server.</MudText>
@if (forecasts == null)
{
    <MudProgressCircular Color="Color.Default" Indeterminate="true" />
}
else
{
    <MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0" MultiSelection=true>
        <HeaderContent>
            <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x=>x.Date)">Date</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureC)">Temp. (C)</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureF)">Temp. (F)</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.Summary!)">Summary</MudTableSortLabel></MudTh>
            <MudTh>Enabled</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd DataLabel="Date">@context.Date</MudTd>
            <MudTd DataLabel="Temp. (C)">@context.TemperatureC</MudTd>
            <MudTd DataLabel="Temp. (F)">@context.TemperatureF</MudTd>
            <MudTd DataLabel="Summary">@context.Summary</MudTd>
            <MudTd DataLabel="Enabled"><MudCheckBox T="bool" Checked="@context.Enabled" CheckedChanged="@(e => UpdateRecord(context, e))"></MudCheckBox></MudTd>
        </RowTemplate>
        <PagerContent>
            <MudTablePager PageSizeOptions="new int[]{50, 100}" />
        </PagerContent>
    </MudTable>
}


@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }

    private async Task UpdateRecord(WeatherForecast record, bool ischecked)
    {
        record.Enabled = ischecked;
        // Call into your data pipeline to update you data store here
        // Emulate the async call
        await Task.Delay(250);
    }
}

And what it looks like: