Grid Drag And Drop Using Drag Handle

Flow
1

I was wondering, what is the ideal way to do a grid drag and drop using a drag handle, instead of allowing the whole row to be dragged? Such as, say, an icon in a dedicated column. This isn’t exactly the same as getting by-column information for drag events, which I’ve seen here, but just setting the drag source and GridDragEvent to only proc from a specific location. The docs show a ‘getDraggableElement’, but that doesn’t apply to grids which have their own built-in functionality from what I’ve seen.

2

Also, v24.

3

…naturally I figure out it essentially immediately and it’s dead simple:

        dragHandleColumn = treeGrid.addColumn(
                new ComponentRenderer<>(entry -> {
                    InlineIconButton dragHandle = new InlineIconButton(LumoIcon.MENU.create());
                    dragHandle.getElement().addEventListener("mousedown", e -> {
                        treeGrid.setRowsDraggable(true);
                        draggedItem = entry;
                    });
                    return dragHandle;
                }));

        treeGrid.addDropListener(event -> {
            // ...
            draggedItem = null;
            treeGrid.setRowsDraggable(false);
        });```
1 Like
4

Even easier:

treeGrid.addColumn(
                new ComponentRenderer<>(entry -> {
                    InlineIconButton dragHandle = new InlineIconButton(LumoIcon.MENU.create());
                    dragHandle.getElement().addEventListener("mouseover", e -> {
                        treeGrid.setRowsDraggable(true);
                        draggedItem = entry;
                    });
                    dragHandle.getElement().addEventListener("mouseout", e -> {
                        treeGrid.setRowsDraggable(false);
                        draggedItem = null;
                    });
                    return dragHandle;
                }));

At list it works for my requirements :slight_smile: