6

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?

user3821656
  • 111
  • 2
  • 7

2 Answers2

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;
        //...
    }
}
Ken747
  • 107
  • 3
0

you can use EditTrigger="TableEditTrigger.EditButton" in MudTable

MSD88
  • 21
  • 6