Hi,
i have added a mudtable with inline edit and delete function.Problem is when i am clicking the second row for editing un edited row and header jumping to left side.How can i fix these CSS? .I need to make un editable row and header freez while inline edit is activated. Below is my code <ColGroup/> i am added CSS .How can i fix this CSS issue?
@inject ISnackbar Snackbar
<MudTable @ref=@table
T="Element"
Items="@elements"
Hover="true"
SortLabel="Sort By"
OnCommitEditClick="@(() => Snackbar.Add("Commit Edit Handler Invoked"))"
RowEditPreview="BackupItem"
RowEditCancel="ResetItemToOriginalValues"
CanCancelEdit="@canCancelEdit"
CommitEditIcon=""
SelectedItemChanged="OnSelectedItemChanged">z
//css for table edit inline coming here
<ColGroup>
@if (applyButtonPosition.DisplayApplyButtonAtStart() || (editButtonPosition.DisplayEditButtonAtStart() && editTrigger == TableEditTrigger.EditButton))
{
<col style="width:50px;" />
}
<col />
<col />
<col style="width:50%;" />
@if (applyButtonPosition.DisplayApplyButtonAtEnd() || (editButtonPosition.DisplayEditButtonAtEnd() && editTrigger == TableEditTrigger.EditButton))
{
<col style="width:88px;" />
}
</ColGroup>
<HeaderContent>
<MudTh>Nr</MudTh>
<MudTh>Name</MudTh>
<MudTh></MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Delete" Class="mud-table-cell-align-right mud-typography-nowrap">
<MudIconButton Icon="@Icons.Material.Filled.Delete"
Variant="Variant.Outlined" Color="Color.Error" Size="Size.Small" />
</MudTd>
</RowTemplate>
<RowEditingTemplate>
<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Name">
<MudTextField @bind-Value="@context.Name" Required />
</MudTd>
<MudTd DataLabel="Age">
<MudNumericField @bind-Value="@context.Age" Required />
</MudTd>
</RowEditingTemplate>
<PagerContent>
<MudTablePager />
</PagerContent>
</MudTable>
@code {
private TableApplyButtonPosition applyButtonPosition = TableApplyButtonPosition.End;
private TableEditButtonPosition editButtonPosition = TableEditButtonPosition.End;
private TableEditTrigger editTrigger = TableEditTrigger.RowClick;
private bool canCancelEdit = true;
private MudTable<Element> table;
private Element elementBeforeEdit;
private IEnumerable<Element> elements = new List<Element>();
protected override void OnInitialized()
{
elements = GetData();
}
private void OnCommitEditButtonClicked(MouseEventArgs e)
{
table.RowEditCommit?.Invoke(table.SelectedItem);
table.OnCommitEditClick.InvokeAsync(e);
table.SetSelectedItem(null);
}
private void OnCancelEditButtonClicked(MouseEventArgs e)
{
table.RowEditCancel?.Invoke(table.SelectedItem);
table.OnCancelEditClick.InvokeAsync(e);
table.SetSelectedItem(null);
}
private void OnSelectedItemChanged(object element)
{
table.SetEditingItem(element);
}
private void BackupItem(object element)
{
elementBeforeEdit = new()
{
Name = ((Element)element).Name,
Age = ((Element)element).Age,
};
}
private void ResetItemToOriginalValues(object element)
{
((Element)element).Name = elementBeforeEdit.Name;
((Element)element).Age = elementBeforeEdit.Age;
}
private IEnumerable<Element> GetData()
{
return new List<Element>()
{
new() { Number = 1, Name = "Peter Parker", Age = 16 },
new() { Number = 2, Name = "Bruce Wayne", Age = 31 },
new() { Number = 3, Name = "Clark Kent", Age = 31 },
new() { Number = 4, Name = "Barry Allen", Age = 29 },
new() { Number = 5, Name = "Tony Stark", Age = 52 },
};
}
class Element
{
public int Number { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
}