blazorbootstrap
blazorbootstrap copied to clipboard
Cannot disable Sortable List dynamically
Using the following modification to one of the examples I wanted to demonstrate that I can disable a list sort and then enable it again within the context of an EditForm.
The sortable list seems to ignore the AllowSorting flag after the initial render. I was hoping that I could disable it dynamically to give a better user experience around when they could move items around and when not.
This is on .NET 6 using Blazor Bootstrap 3.3.1 on a Server side application. All testing has been done in Chrome 136.0.7103.93
` @page "/testing"
<SortableList TItem="Employee" Data="model!.Employees" Context="item" AllowSorting="@(model!.CanSort)" OnUpdate="@OnEmployeeListUpdate">
<ItemTemplate>
@item.Name
</ItemTemplate>
</SortableList>
@code { private EditContext? context; private Model? model;
protected override void OnInitialized()
{
model = new();
context = new EditContext(model);
}
private void OnEmployeeListUpdate(SortableListEventArgs args)
{
var itemToMove = model!.Employees[args.OldIndex];
model!.Employees.RemoveAt(args.OldIndex);
if (args.NewIndex < model!.Employees.Count)
model!.Employees.Insert(args.NewIndex, itemToMove);
else
model!.Employees.Add(itemToMove);
}
private void ToggleSort()
{
StateHasChanged();
}
public record Employee(int Id, string? Name);
public class Model
{
public bool CanSort { get; set; }
public List<Employee> Employees { get; private set; } = Enumerable.Range(1, 5).Select(i => new Employee(i, $"Employee {i}")).ToList();
}
} `