Grid with row drag&drop sortable like Sortable List

[stormenergy91]

Hi, i need to update positions of db items that I show on a Grid. Since the Grid does not support drag&drop like Sortable List, there is any workaround to implement this features? Thanks

[stormenergy91]

If anyone needs something similar, I built it this way:

1 In the Grid component, I added a custom class: table--sortable and the data-id="@context.Id" to the first column

<Grid @ref="itemsGrid" Class="table table-hover table-bordered table-striped table--sortable" DataProvider="TableItemsResultDataProvider"...

 <GridColumns>
     <GridColumn TItem="Core.Models.Crm.QuoteOption" HeaderText="Descrizione" PropertyName="DescriptionIt">
         <small data-id="@context.Id">
             @context.DescriptionIt
         </small>
     </GridColumn>
     ...

2 Then, in the page code, I added the following:

@{
   private DotNetObjectReference<MyComponent>? _dotNetRef;
   
   private IEnumerable<Model.Item> Items;
   
     private async Task<GridDataProviderResult<Model.Item>> TableItemsResultDataProvider(GridDataProviderRequest<Model.Item> request)
  {
      await JS.InvokeVoidAsync("initItemsOrderedGrid", _dotNetRef);
      return await Task.FromResult(request.ApplyTo(Items));
  }

    [JSInvokable("UpdateItemsOrderFromJs")]
    public async Task UpdateItemsOrderFromJs(List<string> orderedIds)
    {
       // I call may backend endpoint
        await WebApiService.SortItemsAsync(ItemId, orderedIds);
    
        await itemsGrid.RefreshDataAsync();
        // Init again the JS component (workaround for MAUI)
        await JS.InvokeVoidAsync("initItemsOrderedGrid", _dotNetRef);
    }
}

3 I also created this JS function to may JS file and added it to the index.html:

let sortableInstance;

window.initItemsOrderedGrid = (dotNetRef) => {    
    const maxAttempts = 20;
    let attempts = 0;

    const interval = setInterval(() => {
        const table = document.querySelector(".table--sortable");
        const tbody = table?.querySelector("tbody");

        if (table && tbody) {

            if (sortableInstance) {
                sortableInstance.destroy(); // need for MAUI
            }

            clearInterval(interval);
            sortableInstance = new Sortable(tbody, {
                animation: 150,
                fallbackOnBody: true,
                swapThreshold: 0.65,
                touchStartThreshold: 5,
                fallbackTolerance: 3,
                forceFallback: true,
                ghostClass: "sortable-ghost",
                onEnd: function (evt) {
                    const rows = Array.from(tbody.querySelectorAll('[data-id]'));
                    const order = rows.map(row => row.getAttribute('data-id'));

                    dotNetRef.invokeMethodAsync('UpdateItemsOrderFromJs', order);
                }
            });
        } else {
            attempts++;
            if (attempts >= maxAttempts) {
                clearInterval(interval);
            }
        }
    }, 200);
};

[stormenergy91]

@gvreddy04, maybe you could integrate something similar into the Grid component! :)