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
@inject ISnackbar Snackbar
z
//css for table edit inline coming here
@if (applyButtonPosition.DisplayApplyButtonAtStart() || (editButtonPosition.DisplayEditButtonAtStart() && editTrigger == TableEditTrigger.EditButton))
{
}
@if (applyButtonPosition.DisplayApplyButtonAtEnd() || (editButtonPosition.DisplayEditButtonAtEnd() && editTrigger == TableEditTrigger.EditButton))
{
}
Nr
Name
@context.Number
@context.Name
@context.Number
@code {
private TableApplyButtonPosition applyButtonPosition = TableApplyButtonPosition.End;
private TableEditButtonPosition editButtonPosition = TableEditButtonPosition.End;
private TableEditTrigger editTrigger = TableEditTrigger.RowClick;
private bool canCancelEdit = true;
private MudTable table;
private Element elementBeforeEdit;
private IEnumerable elements = new List();
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 GetData()
{
return new List()
{
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; }
}
}
Naimish MakwanaPosted Jan 18, 2023, 4:27 AM
Hi Raman,
Please Replace
To
Refer link with working example : https://try.mudblazor.com/snippet/cucxElvMPBAFdvXG
Thanks