Incubator DnD Autoscroll

Automatic vertical scrolling while dragging a row in Grid or TreeGrid.

View larger

Close

The extension adds a vertical automatic scrolling to a Vaadin Grid or Vaadin TreeGrid component. When a drag is in progress and the user drags the mouse cursor to the top or bottom of the Grid, the grid will start to automatically scroll. By its nature the extension should work with any Grid or TreeGrid as long as additional customisations are not needed on the GridDragSource and/or GridDropTarget extensions.

As a part of the extension the badge showing the number of rows being dragged is also updated to contain the actual count of selected rows (not just the visible ones) and the DragStartEvent has been modified to contain the full list of dragged rows (including non-visible rows).

Vaadin Pro

This component is available in the Vaadin Pro subscription. It is still open source, but you need to have a valid CVAL license in order to use it. Read more at: Pricing

Sample code

Grid<People> grid = new Grid<People>(People.class);
grid.setWidth(100, Unit.PERCENTAGE);
layout.addComponent(grid);

grid.setDataProvider(new ListDataProvider<People>(createPeople()));
grid.setSelectionMode(Grid.SelectionMode.MULTI);
new AutoScrollGridRowDragger<>(grid);

/*Helpers*/
public List<People> createPeople() {
        return IntStream.range(0, 100).mapToObj(id -> new People("Foo " + id, id)).collect(Collectors.toList());  
}

public static class People {
	private String name;
	private int id;

	public People(String name, int id) {
		this.name = name;			
                 this.id = id;
	}

         //Getters and setters
}

TreeGrid<Project> treeGrid = new TreeGrid<>();
treeGrid.setCaption("The demo only supports transferring leafs to leafs");
treeGrid.setWidth(100, Unit.PERCENTAGE);
treeGrid.setItems(DataGenerationUtil.generateProjectsForYears(2010, 2016), Project::getSubProjects);
treeGrid.setSelectionMode(SelectionMode.MULTI);
AutoScrollTreeGridDragSource<Project> dragSource = new AutoScrollTreeGridDragSource<Project>(treeGrid);

// The drag start event handling has been modified to contain all the dragged
// items, not just the visible ones.
dragSource.addGridDragStartListener(e -> dragSource.setDragData(e.getDraggedItems()));

new AutoScrollTreeGridDropTarget<>(treeGrid, DropMode.BETWEEN).addTreeGridDropListener(new ProjectDropHandler());

treeGrid.addColumn(Project::getName).setCaption("Project Name").setId("name-column");
treeGrid.addColumn(Project::getHoursDone).setCaption("Hours Done");
treeGrid.addColumn(Project::getLastModified).setCaption("Last Modified");

grid1 = createGrid();
grid2 = createGrid();

grid1.setCaption("Only top to bottom dragging");

addComponents(grid1, grid2);

AutoScrollGridRowDragger<People> autoScrollGridRowDragger = new AutoScrollGridRowDragger<>(grid1, grid2,DropMode.BETWEEN);

// Drag start event has been modified to include all the dragged items
// (including invisible ones) so we store it in the drag data for later use...
autoScrollGridRowDragger.getGridDragSource().addGridDragStartListener(e -> {autoScrollGridRowDragger.getGridDragSource().setDragData(e.getDraggedItems());});
autoScrollGridRowDragger.getGridDragSource().addAssociatedDropTargetForAutoScroll(grid2);

// Because we're no longer relying on the keys being sent from the client to
// the server when determining the dragged items, we need to clear the
// selected/dragged items from the selected list on the dragged grid. We could
// select them in the new grid after they are dropped if we wanted to...
autoScrollGridRowDragger.getGridDropTarget().addGridDropListener(e -> {
grid1.getSelectionModel().deselectAll();

// Not strictly necessary, but better user experience if we select the
// dragged items so user finds them easily...
grid2.asMultiSelect().select(((List<People>) e.getDragData().get()).toArray(new People[0]));
});

Links

• Online Demo
• Edit

Compatibility