RadzenDataGrid Row Re-order

Radzen Blazor Studio
1

Is there by chance a sample project of this demo: Blazor DataGrid Component - Reorder rows | Free UI Components by Radzen

That has the ability to update an order column in a DB source table?

This is my code:

void RowRender(RowRenderEventArgs<QMS.Models.QMS_Db.CiImplementationAction> args)
    {
        args.Attributes.Add("title", "Drag row to reorder");
        args.Attributes.Add("style", "cursor:grab");
        args.Attributes.Add("draggable", "true");
        args.Attributes.Add("ondragover", "event.preventDefault();event.dataTransfer.dropEffect='move';");
        args.Attributes.Add("ondragstart", EventCallback.Factory.Create<DragEventArgs>(this, () => draggedItem = args.Data));
        args.Attributes.Add("ondrop", EventCallback.Factory.Create<DragEventArgs>(this, async () =>
        {
            if (draggedItem == null || args.Data == null) return;

            var actionsList = ciImplementationActions.ToList();
            actionsList.Remove(draggedItem);

            var droppedIndex = actionsList.IndexOf(args.Data);
            if (droppedIndex < 0) droppedIndex = actionsList.Count;

            actionsList.Insert(droppedIndex, draggedItem);

            for (int i = 0; i < actionsList.Count; i++)
            {
                actionsList[i].CiActionOrder = i + 1;
            }

            ciImplementationActions = actionsList;

            foreach (var action in ciImplementationActions)
            {
                await QMS_DbService.UpdateCiImplementationAction(action.CiactionId, action);
            }

            await JSRuntime.InvokeVoidAsync("eval", "document.querySelectorAll('.my-class').forEach(e => e.classList.remove('my-class'))");
            await ActionGrid.Reload();
        }));
    }

Before drag:

image
image466×198 6.31 KB

When I drag any row down 1 or 2 positions it always ends up at the bottom and leaves the original:

image
image498×253 10.5 KB

2

We don't have such example, I'm afraid. All we have is just this demo that can be extended to server specific needs.

3

Thank you, I did get this working:

ObservableCollection<QMS.Models.QMS_Db.CiImplementationAction> ciImplementation_Actions;

        QMS.Models.QMS_Db.CiImplementationAction draggedAction;

        void RowRender(RowRenderEventArgs<QMS.Models.QMS_Db.CiImplementationAction> args)
        {
            args.Attributes.Add("title", "Drag row to reorder");
            args.Attributes.Add("style", "cursor:grab");
            args.Attributes.Add("draggable", "true");
            args.Attributes.Add("ondragover", "event.preventDefault();event.target.closest('.rz-data-row').classList.add('dragged-row')");
            args.Attributes.Add("ondragleave", "event.target.closest('.rz-data-row').classList.remove('dragged-row')");
            args.Attributes.Add("ondragstart", EventCallback.Factory.Create<DragEventArgs>(this, () => draggedAction = args.Data));
            args.Attributes.Add("ondrop", EventCallback.Factory.Create<DragEventArgs>(this, () => OnRowDrop(args.Data)));
        }

        void OnRowDrop(QMS.Models.QMS_Db.CiImplementationAction droppedAction)
        {
            if (draggedAction != null && droppedAction != null && ciImplementation_Actions != null)
            {
                var draggedIndex = ciImplementation_Actions.IndexOf(draggedAction);
                var droppedIndex = ciImplementation_Actions.IndexOf(droppedAction);

                // Remove the dragged item
                ciImplementation_Actions.Remove(draggedAction);

                // Adjust the dropped index based on the removal of the dragged item
                if (draggedIndex < droppedIndex)
                {
                    droppedIndex--; // Adjust the index because one item was removed above the dropped item
                }

                // Ensure droppedIndex is within bounds
                droppedIndex = Math.Min(droppedIndex, ciImplementation_Actions.Count);

                ciImplementation_Actions.Insert(droppedIndex, draggedAction);

                UpdateActionOrder();
                JSRuntime.InvokeVoidAsync("eval", $"document.querySelector('.dragged-row').classList.remove('dragged-row')");
            }
        }

        async void UpdateActionOrder()
        {
            for (int i = 0; i < ciImplementation_Actions.Count; i++)
            {
                ciImplementation_Actions[i].CiActionOrder = i + 1;

                try
                {
                    await QMS_DbService.UpdateCiImplementationAction(ciImplementation_Actions[i].CiactionId, ciImplementation_Actions[i]);
                }
                catch (Exception ex)
                {
                    NotificationService.Notify(new NotificationMessage
                    {
                        Severity = NotificationSeverity.Error,
                        Summary = "Error",
                        Detail = $"Failed to update CiActionOrder for action ID {ciImplementation_Actions[i].CiactionId}: {ex.Message}"
                    });
                }
            }

            await ActionGrid.Reload();
            
            NotificationService.Notify(new NotificationMessage
            {
                Severity = NotificationSeverity.Success,
                Summary = "Success",
                Detail = "Action order updated successfully"
            });
        }