How to implement drag and drop functionality between two components?

Support
#1

Hi,
I need to create a drag and drop functionality between a TreeTable and DataGrid component but I am not aware of how this operation could be implemented. As you can see in the following screenshot, the datagrid contains a list of emails which users are allowed to archive them into a specific folder contained in the TreeTable component at the left section of the screen. Is that possible? Otherwise, is there any workaround for this functionality?

image

Regards,
George

#2

Hello,

I’m not sure about TreeTable, but for DataGrid and TreeDataGrid drag and drop can be implemented using Vaadin API

Documentation: Drag and Drop | Advanced Topics | Framework | Vaadin 8 Docs

Example:

        var vaadinGrid = grid.unwrap(com.vaadin.ui.Grid.class);
        var dragSource = new GridDragSource<Specialty>(vaadinGrid);
        dragSource.setEffectAllowed(EffectAllowed.LINK);
        dragSource.setDragDataGenerator(DragSourceState.DATA_TYPE_TEXT_PLAIN, item -> item.getId().toString());
        var vaadinTreeGrid = treeGrid.unwrap(com.vaadin.ui.TreeGrid.class);
        var dropTarget = new TreeGridDropTarget<Specialty>(vaadinTreeGrid, DropMode.ON_TOP);
        dropTarget.addTreeGridDropListener(event -> {
            String dragItem = event.getDataTransferData(DragSourceState.DATA_TYPE_TEXT_PLAIN)
                    .map(UUID::fromString)
                    .map(id -> grid.getItems().getItem(id))
                    .map(Specialty::getName)
                    .orElse(null);
            String dropItem = event.getDropTargetRow()
                    .map(Specialty::getName)
                    .orElse(null);
            System.out.println("dragItem=" + dragItem + ", dropItem=" + dropItem);
        });
#3

@papageor
Hi George

Have you already looked at the Jmix Cookbook “Drag and drop” example here: https://demo.jmix.io/sampler/#main/16/sample?id=dd-verticallayout

Maybe it can help; good luck.

Best regards
Chris

1 Like
#4

Thanks for your reply. I will check and get back to you in case I have any issue.

Regards,
George