bug(Table): Can Not Work With SortableJS

[ice6]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I use the following code to prevent js making any conflict with BlazorServer's dom change.

new Sortable(tbody, {
    animation: 150,
    handle: '.cursor-move',
    ghostClass: 'blue-background-class',
    onUpdate: (event) => {
        // Revert the DOM to match the .NET state
        event.item.remove();
        event.to.insertBefore(event.item, event.to.childNodes[event.oldIndex]);

        // Notify .NET to update its model and re-render
        component.invokeMethodAsync('OnUpdateJS', event.oldDraggableIndex, event.newDraggableIndex);
    }
});

And I use tableRef?.QueryAsync to refresh the table content. But the rows will be in a mess state.

Even I use Items as source, and use StateHasChanged to refresh the table content. the rows is still in a mess state.

Same js code, if I use raw html table directly, and use StateHasChanged to make the dom change. I works well.

Check here for ref:
https://github.com/the-urlist/BlazorSortable/tree/main/Shared

Expected Behavior

can work with SortableJS.

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

No response

Anything else?

No response

[bb-auto]

@ice6 Thank you for filing this issue. In order for us to investigate this issue, please provide a minimalistic repro project that illustrates the problem.

[ArgoZhang]

@ice6 where is our blazor UI component?

[ice6]

@ice6 where is our blazor UI component?

1. the razor part

<Table TItem="Product" Items="Items" ShowLoading="true" @ref="ProductTable" IsPagination="false" ShowPageInfo="false" RenderMode="TableRenderMode.Auto" IsFixedHeader="true" class="table-demo"
       IsStriped="true" IsBordered="true" ShowSkeleton="true" IsMultipleSelect="false"
       ShowToolbar="true" ShowAddButton="true" ShowEditButton="false" ShowDeleteButton="false"
       AddButtonText="新增产品" AddModalTitle="新增产品"
       ShowSearch="false" ShowAdvancedSearch="false"
       ShowExtendButtons="true" ShowExtendEditButton="true" ShowExtendDeleteButton="true" ExtendButtonColumnWidth="180"
       AutoGenerateColumns="false" OnSaveAsync="OnSaveAsync" OnDeleteAsync="OnDeleteAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.Id" Text="Id" Width="80" IsVisibleWhenAdd="false" IsVisibleWhenEdit="false" />
        <TableColumn @bind-Field="@context.Name" Text="名称" Width="120" Searchable="true"></TableColumn>
        <TableColumn @bind-Field="@context.TableName" Text="表名" Width="120" Searchable="false" IsVisibleWhenEdit="false"></TableColumn>
        <TableColumn @bind-Field="@context.Schema" Text="属性" TextWrap="true" Searchable="false" IsVisibleWhenAdd="false" IsVisibleWhenEdit="false">
            <Template Context="value">
                @string.Join(",", value.Row.ProductSchema?.Fields.Select(f => f.Name).ToArray()?? new string[]{})
            </Template>
        </TableColumn>
    </TableColumns>
    <BeforeRowButtonTemplate>
        <Button Class="cursor-move btn-xs" style="cursor: move" Icon="fas fa-bars" Color="Color.Primary"></Button>
    </BeforeRowButtonTemplate>
</Table>

2. the code behind part

   [JSInvokable("OnUpdateJS")]
   public async void OnUpdateJS(int oldIndex, int newIndex)
   {
       List<Product> items = Items;
       var itemToMove = items[oldIndex];
       items.RemoveAt(oldIndex);

       if (newIndex < items.Count)
       {
           items.Insert(newIndex, itemToMove);
       }
       else
       {
           items.Add(itemToMove);
       }
       await Task.CompletedTask;
       StateHasChanged();
   }

3. the js part

    new Sortable(tbody, {
        animation: 150,
        handle: '.cursor-move',
        ghostClass: 'blue-background-class',
        onUpdate: (event) => {
            // Revert the DOM to match the .NET state
            event.item.remove();
            event.to.insertBefore(event.item, event.to.childNodes[event.oldIndex]);

            // Notify .NET to update its model and re-render
            component.invokeMethodAsync('OnUpdateJS', event.oldDraggableIndex, event.newDraggableIndex);
        }
    });

[ArgoZhang]

@ice6 I guess you wanna use SortalbeJs to reorder the table body. so could you submit a mini-repro-project? I need the whole code including the javascript asset.

[ArgoZhang]

@ice6 please see the demo https://www.blazor.zone/sortable-list#Table

[ice6]

@ice6 please see the demo https://www.blazor.zone/sortable-list#Table

hey man, u r so cool!

the demo in the page: 简单例子, 分组共享拖拽 is quite confusing, it messed up after dragging.

thanks for your effect, especially the table demo works, it is quite surprising :)

https://github.com/dotnetcore/BootstrapBlazor/pull/4029/files

[ArgoZhang]

@ice6 later I will fix this issue.

[ArgoZhang]

@ice6 fixed