toggle MudTable inline editing via an edit button

Question

I am trying to get the mudtable to enter inline mode when you click on an icon. Currently it happens when you click on any row.

<MudSwitch @bind-Checked="@ronly" Color="Color.Tertiary">Read Only</MudSwitch>

I used the following to toggle the ability to show the inline edit but if you enable it you still have to click on the table to show it.

I also took the approach below

<MudButton Variant="Variant.Filled" OnClick="editTableBTN" StartIcon="@Icons.Material.Filled.Delete" Color="Color.Error">edit</MudButton>

   private void editTableBTN()
    {
        ronly = false;
        $("#myTable>tbody>tr:first").trigger('click');
}

this enables editing when clicked, then auto clicks the table. After this if we toggle the ronly it will work as intended but I feel like there has to a better way. Anyone has any tips?

Answer 1

One way is to add an Edit icon to the row.

1. Start with a ReadOnly table
2. Use a <MudIcon> instead of a <MudButton>**.
3. In the icon click event set the table to ReadOnly=false

<MudTable>
    ReadOnly="@MainGrid_ReadOnly"
    <HeaderContent>
        ....
        <MudTh>Action</MudTh>
    </HeaderContent>
    <RowTemplate>
        ...
        <MudTd DataLabel="">
            <MudIcon Icon="@Icons.Material.Filled.Edit" Size="Size.Small" @onclick="@Edit" />
        </MudTd>
    </RowTemplate>
</MudTable>

@code {
    private MudTable<AlertSetting> MainGrid { get; set; }
    private bool MainGrid_ReadOnly = true;

    private void Edit()
    {
        MainGrid_ReadOnly = false;
        //...
    }
}