Drag and drop items from one Grid to another



Following is a short example to drag and drop similar type of items from one Grid to another Grid in Vaadin 8.

package com.example.demo;

import java.util.ArrayList;
import java.util.List;
import java.util.Optional;

import com.vaadin.data.provider.ListDataProvider;
import com.vaadin.shared.ui.dnd.DropEffect;
import com.vaadin.shared.ui.dnd.EffectAllowed;
import com.vaadin.shared.ui.grid.DropMode;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.components.grid.GridDragSource;
import com.vaadin.ui.components.grid.GridDropTarget;
import com.vaadin.ui.renderers.ButtonRenderer;

public class DragAndDropFromGrid extends CustomComponent {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    private HorizontalLayout hlytbase;

    private Grid<Company> grid1;
    private Grid<Company> grid2;

    private ListDataProvider<Company> provider1;
    private ListDataProvider<Company> provider2;

    private Optional<Company> dragged;

    private List<Company> lstgridsecond;
    private List<Company> cmpy;
    private List<Company> list;

    public DragAndDropFromGrid() {
        init();
    }

    private void init() {
        lstgridsecond = new ArrayList<>();
        hlytbase = new HorizontalLayout();

        cmpy = new ArrayList<>();
        cmpy.add(new Company(1, "idli"));
        cmpy.add(new Company(2, "Pizza"));
        cmpy.add(new Company(3, "samosa"));
        cmpy.add(new Company(4, "Pani puri"));
        cmpy.add(new Company(5, "Ragdo"));

        provider1 = new ListDataProvider<>(cmpy);
        provider2 = new ListDataProvider<>(lstgridsecond);

        grid1 = new Grid<>();
        grid2 = new Grid<>();

        grid1.addColumn(Company::getSerialNo).setCaption("sr no");
        grid1.addColumn(Company::getName).setCaption("name");
        grid2.addColumn(Company::getSerialNo).setCaption("sr no");
        grid2.addColumn(Company::getName).setCaption("name");
        grid2.addColumn(del -> "Delete", new ButtonRenderer<Company>(clickEvent -> {
            lstgridsecond.remove(clickEvent.getItem());
            provider2.refreshAll();
        })).setCaption("Delete");

        grid1.setCaption("Menu Drag and Drop to Select" + ">>> ");
        grid2.setCaption("Selected Menu to be Ordered");

        grid2.setDataProvider(provider2);
        grid1.setDataProvider(provider1);

        hlytbase.setMargin(true);
        hlytbase.addComponents(grid1, grid2);
        setCompositionRoot(hlytbase);

        implementDragAndDrop();
    }

    @SuppressWarnings("unchecked")
    private void implementDragAndDrop() {
        GridDragSource<Company> dragSource = new GridDragSource<>(grid1);
        dragSource.setEffectAllowed(EffectAllowed.MOVE);

        dragSource.setDragDataGenerator("text", person -> {
            return person.getName() + " " + person.getSerialNo();
        });

        dragSource.addGridDragStartListener(event -> {
            list = new ArrayList<>(event.getDraggedItems());
            if (!list.isEmpty()) {
                dragged = Optional.of(list.get(0));
            } else {
                dragged = Optional.empty();
            }
        });

        dragSource.addGridDragEndListener(event -> {
        // If drop was successful, remove dragged items from source Grid
            if (event.getDropEffect() == DropEffect.MOVE) {
                ((ListDataProvider<Company>)grid1.getDataProvider()).getItems().remove(dragged);
                grid1.getDataProvider().refreshAll();
                // Remove reference to dragged items
                dragged = null;
            }
        });

        GridDropTarget<Company> dropTarget = new GridDropTarget<>(grid2, DropMode.ON_TOP);
        dropTarget.setDropEffect(DropEffect.MOVE);

        dropTarget.addGridDropListener(event -> {
            if (dragged.isPresent() && !lstgridsecond.contains(list.get(0))) {
                lstgridsecond.add(dragged.get());
                provider2.refreshAll();
            }
        });
    }
}

Comments

Popular posts from this blog

State space search / blocks world problem by heuristic approach /TIC TAC TOE

Navigation in Vaadin.