How to drag rows with mouse in TreeDataGrid?

Support
#1

Jmix 2.4.3

I created a simple TreeDataGrid as in the example data-grid-tree. I set the attributes rowDraggable=“true”, dropMode in each of the options. As a result, the line can be moved with the mouse, but it does not occupy the place where it was dragged. Could you please tell me what is required to drag and drop rows correctly? And it would be great if you added an example with this functionality here data-grid-tree

#3

Hello!

To apply changes after a drag-and-drop operation, you should update the data in the CollectionContainer.

Firstly, in the TreeDataGrid, configure the transferred data. This is necessary to identify which item was dragged.

@ViewComponent
private TreeDataGrid<Task> tasksDataGrid;

@Subscribe
public void onInit(final InitEvent event) {
    tasksDataGrid.setDragDataGenerator("item", task -> task.getId().toString());
}

Then subscribe to the GridDropEvent to handle the drop event and save the new state of the rows.

 @Subscribe("tasksDataGrid")
 public void onTasksDataGridGridDrop(final GridDropEvent<Task> event) {
     String draggedItemId = event.getDataTransferData("item").orElse(null);
     if (Strings.isNullOrEmpty(draggedItemId)) {
         return;
     }
     Task draggedItem = tasksDc.getItem(UUID.fromString(draggedItemId));
     Task dropTarget = event.getDropTargetItem().orElse(null);
     draggedItem.setTask(dropTarget);

     // Replace item in the container to trigger update event.
     tasksDc.replaceItem(draggedItem);
 }

The example above demonstrates a simple case where an item is dropped onto another. It does not handle edge cases. I hope this helps you get started.

I created an issue to update the UI samples with drag-and-drop functionality. Add drag and drop samples · Issue #49 · jmix-framework/jmix-ui-samples-2 · GitHub