blazorbootstrap icon indicating copy to clipboard operation
blazorbootstrap copied to clipboard

Cannot disable Sortable List dynamically

Open powertec-dan opened this issue 8 months ago • 0 comments

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"

ToggleSort()" />
<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();
}

} `

powertec-dan avatar Jun 04 '25 01:06 powertec-dan