Browse Source

Rename GridDragger to GridRowDragger (#10333)

The old name GridDragger gave an impression that you're dragging the whole grid instead of rows.
tags/8.2.0.beta1
Pekka Hyvönen 6 years ago
parent
commit
535f259607

+ 8
- 8
documentation/advanced/advanced-dragndrop.asciidoc View File

@@ -230,11 +230,11 @@ More details can be found from the link:https://github.com/timruffles/ios-html5-

It is possible to drag and drop the rows of a Grid component. This allows reordering of rows, dragging rows between different Grids, dragging rows outside of a Grid or dropping data onto rows.

In Vaadin Framework 8.2, a `GridDragger` helper has been added to make it easier for the simple cases to enable drag-and-drop support for reordering one grid's rows and moving rows between two grids with the same data type.
In Vaadin Framework 8.2, a `GridRowDragger` helper has been added to make it easier for the simple cases to enable drag-and-drop support for reordering one grid's rows and moving rows between two grids with the same data type.

=== Drag and Drop Reordering Items of a Grid (since 8.2)

To allow the user to reorder the rows in a grid, you can use the `GridDragger` extension. It will handle configuring the grid as a drag source and drop target, and insert the dropped rows to the dropped index in the data provider, when a `ListDataProvider` is used.
To allow the user to reorder the rows in a grid, you can use the `GridRowDragger` extension. It will handle configuring the grid as a drag source and drop target, and insert the dropped rows to the dropped index in the data provider, when a `ListDataProvider` is used.

[source,java]
----
@@ -244,21 +244,21 @@ Grid<Task> taskGrid = new Grid<>("Priority Tasks", service.getTasks());
// grid column etc. setup omitted

// enable DnD reordering within the grid
GridDragger<Task> gridDragger = new GridDragger<>(taskGrid);
GridRowDragger<Task> gridRowDragger = new GridRowDragger<>(taskGrid);

// disable all columns sorting so DnD reordering is always used
grid.getColumns().stream().forEach(col -> col.setSortable(false));
----

The `GridDragger` uses the `DropMode.BETWEEN` by default. It doesn't not allow the user to drop data on top of a sorted grid's rows by automatically switching to `DropMode.ON_GRID` if the grid has been sorted by the user. This is because the shown drop location would not be correct due to the sorting. It is recommended that you disable the sorting for the grid, by using the `Column.setSortable` method (like above). By default, all columns are sortable when a in-memory data provider is used. If you allow the user to drop on top of a sorted grid's rows, you should scroll the dropped data to be visible with `grid.scrollToRow(index);` after drop for good UX - the `GridDragger` does not do this!
The `GridRowDragger` uses the `DropMode.BETWEEN` by default. It doesn't not allow the user to drop data on top of a sorted grid's rows by automatically switching to `DropMode.ON_GRID` if the grid has been sorted by the user. This is because the shown drop location would not be correct due to the sorting. It is recommended that you disable the sorting for the grid, by using the `Column.setSortable` method (like above). By default, all columns are sortable when a in-memory data provider is used. If you allow the user to drop on top of a sorted grid's rows, you should scroll the dropped data to be visible with `grid.scrollToRow(index);` after drop for good UX - the `GridRowDragger` does not do this!

If you want to customize the setup for the grid as a drag source or drop target, you can access and customize the handlers with the `getGridDragSource` and the `getGridDropTarget()` methods.
If you want to customize the setup for the grid as a drag source or drop target, you can access and customize the handlers with the `getGridDragSource()` and `getGridDropTarget()` methods.

For supporting other data providers, you can customize data provider updating on drop event with `setSourceDataProviderUpdater(SourceDataProviderUpdater<T> updater)` (for the source grid row removal) and `setTargetDataProviderUpdater(TargetDataProviderUpdater<T> updater)` (for the target grid row adding). The drop index calculation can be customized via `setDropIndexCalculator(DropIndexCalculator<T> dropIndexCalculator)`.

=== Drag and Drop between two Grids (since 8.2)

The `GridDragger` extension enables you to easily setup drag and drop moving of data between two grids. The same features apply as with the single grid reordering case in previous chapter.
The `GridRowDragger` extension enables you to easily setup drag and drop moving of data between two grids. The same features apply as with the single grid reordering case in previous chapter.

The following code snippet shows an example of allowing dragging items both ways between two grids. Note that it does not allow the user to drop the data on the same grid where the drag was started from, by setting the drop effect to `NONE` and thus the drop indicator is not shown.

@@ -268,8 +268,8 @@ The following code snippet shows an example of allowing dragging items both ways
Grid<Person> left = createGrid();
Grid<Person> right = createGrid();

GridDragger<Person> leftToRight = new GridDragger<>(left, right);
GridDragger<Person> rightToLeft = new GridDragger<>(right, left);
GridRowDragger<Person> leftToRight = new GridRowDragger<>(left, right);
GridRowDragger<Person> rightToLeft = new GridRowDragger<>(right, left);

// Don't show the drop indicator for drags over the same grid where the drag started
leftToRight.getGridDragSource()

+ 1
- 1
server/src/main/java/com/vaadin/ui/components/grid/DropIndexCalculator.java View File

@@ -23,7 +23,7 @@ import java.io.Serializable;
*
* @author Vaadin Ltd
* @since 8.2
* @see GridDragger
* @see GridRowDragger
* @param <T>
* the bean type
*/

+ 1
- 1
server/src/main/java/com/vaadin/ui/components/grid/GridDragSource.java View File

@@ -43,7 +43,7 @@ import elemental.json.JsonObject;
* The Grid bean type.
* @author Vaadin Ltd.
* @since 8.1
* @see GridDragger
* @see GridRowDragger
*/
public class GridDragSource<T> extends DragSourceExtension<Grid<T>> {


+ 1
- 1
server/src/main/java/com/vaadin/ui/components/grid/GridDropTarget.java View File

@@ -35,7 +35,7 @@ import com.vaadin.ui.dnd.DropTargetExtension;
* Type of the Grid bean.
* @author Vaadin Ltd
* @since 8.1
* @see GridDragger
* @see GridRowDragger
*/
public class GridDropTarget<T> extends DropTargetExtension<Grid<T>> {


server/src/main/java/com/vaadin/ui/components/grid/GridDragger.java → server/src/main/java/com/vaadin/ui/components/grid/GridRowDragger.java View File

@@ -58,7 +58,7 @@ import com.vaadin.ui.Grid.Column;
* @author Vaadin Ltd
* @since 8.2
*/
public class GridDragger<T> implements Serializable {
public class GridRowDragger<T> implements Serializable {

private final GridDropTarget<T> gridDropTarget;
private final GridDragSource<T> gridDragSource;
@@ -95,7 +95,7 @@ public class GridDragger<T> implements Serializable {
* @param grid
* Grid to be extended.
*/
public GridDragger(Grid<T> grid) {
public GridRowDragger(Grid<T> grid) {
this(grid, DropMode.BETWEEN);
}

@@ -122,7 +122,7 @@ public class GridDragger<T> implements Serializable {
* @param dropMode
* DropMode to be used.
*/
public GridDragger(Grid<T> grid, DropMode dropMode) {
public GridRowDragger(Grid<T> grid, DropMode dropMode) {
this(grid, grid, dropMode);
}

@@ -142,7 +142,7 @@ public class GridDragger<T> implements Serializable {
* @param target
* the target grid dropped to.
*/
public GridDragger(Grid<T> source, Grid<T> target) {
public GridRowDragger(Grid<T> source, Grid<T> target) {
this(source, target, DropMode.BETWEEN);
}

@@ -161,7 +161,7 @@ public class GridDragger<T> implements Serializable {
* @param sourceDataProviderUpdater
* handler for updating source grid data provider
*/
public GridDragger(Grid<T> source, Grid<T> target,
public GridRowDragger(Grid<T> source, Grid<T> target,
TargetDataProviderUpdater<T> targetDataProviderUpdater,
SourceDataProviderUpdater<T> sourceDataProviderUpdater) {
this(source, target, DropMode.BETWEEN);
@@ -186,7 +186,7 @@ public class GridDragger<T> implements Serializable {
* @param dropMode
* the drop mode to use
*/
public GridDragger(Grid<T> source, Grid<T> target, DropMode dropMode) {
public GridRowDragger(Grid<T> source, Grid<T> target, DropMode dropMode) {
gridDragSource = new GridDragSource<>(source);

gridDropTarget = new GridDropTarget<>(target, dropMode);
@@ -493,7 +493,7 @@ public class GridDragger<T> implements Serializable {
new StringBuilder().append(sourceGrid ? "Source " : "Target ")
.append("grid does not have a ListDataProvider, cannot automatically ")
.append(sourceGrid ? "remove " : "add ")
.append("items. Use GridDragger.set")
.append("items. Use GridRowDragger.set")
.append(sourceGrid ? "Source" : "Target")
.append("DataProviderUpdater(...) ")
.append(sourceGrid ? ""
@@ -508,7 +508,7 @@ public class GridDragger<T> implements Serializable {
.append(sourceGrid ? "Source " : "Target ")
.append("grid's ListDataProvider is not backed by a List-collection, cannot ")
.append(sourceGrid ? "remove " : "add ")
.append("items. Use a ListDataProvider backed by a List, or use GridDragger.set")
.append("items. Use a ListDataProvider backed by a List, or use GridRowDragger.set")
.append(sourceGrid ? "Source" : "Target")
.append("DataProviderUpdater(...) ")
.append(sourceGrid ? "" : "and setDropIndexCalculator(...) ")

+ 1
- 1
server/src/main/java/com/vaadin/ui/components/grid/SourceDataProviderUpdater.java View File

@@ -22,7 +22,7 @@ import com.vaadin.data.provider.DataProvider;
import com.vaadin.shared.ui.dnd.DropEffect;

/**
* A handler for source grid data provider updater for {@link GridDragger}.
* A handler for source grid data provider updater for {@link GridRowDragger}.
*
* Used to handle updates to the source grid's {@link DataProvider} after a
* drop.

+ 1
- 1
server/src/main/java/com/vaadin/ui/components/grid/TargetDataProviderUpdater.java View File

@@ -22,7 +22,7 @@ import com.vaadin.data.provider.DataProvider;
import com.vaadin.shared.ui.dnd.DropEffect;

/**
* A handler for target grid data provider updater for {@link GridDragger}.
* A handler for target grid data provider updater for {@link GridRowDragger}.
*
* Used to handle updates to the target grid's {@link DataProvider} after a
* drop.

server/src/test/java/com/vaadin/tests/server/component/grid/GridDraggerOneGridTest.java → server/src/test/java/com/vaadin/tests/server/component/grid/GridRowDraggerOneGridTest.java View File

@@ -15,15 +15,15 @@ import com.vaadin.data.provider.ListDataProvider;
import com.vaadin.shared.ui.grid.DropLocation;
import com.vaadin.ui.Grid;
import com.vaadin.ui.components.grid.DropIndexCalculator;
import com.vaadin.ui.components.grid.GridDragger;
import com.vaadin.ui.components.grid.GridRowDragger;
import com.vaadin.ui.components.grid.GridDropEvent;
import com.vaadin.ui.components.grid.SourceDataProviderUpdater;

public class GridDraggerOneGridTest {
public class GridRowDraggerOneGridTest {

public class TestGridDragger extends GridDragger<String> {
public class TestGridRowDragger extends GridRowDragger<String> {

public TestGridDragger(Grid<String> grid) {
public TestGridRowDragger(Grid<String> grid) {
super(grid);
}

@@ -39,14 +39,14 @@ public class GridDraggerOneGridTest {
}

private Grid<String> source;
private TestGridDragger dragger;
private TestGridRowDragger dragger;
private List<String> draggedItems;

@Before
public void setupListCase() {
source = new Grid<>();
source.addColumn(s -> s).setId("1");
dragger = new TestGridDragger(source);
dragger = new TestGridRowDragger(source);
}

private void drop(String dropIndex, DropLocation dropLocation,

server/src/test/java/com/vaadin/tests/server/component/grid/GridDraggerTwoGridsTest.java → server/src/test/java/com/vaadin/tests/server/component/grid/GridRowDraggerTwoGridsTest.java View File

@@ -15,15 +15,15 @@ import com.vaadin.data.provider.ListDataProvider;
import com.vaadin.shared.ui.grid.DropLocation;
import com.vaadin.ui.Grid;
import com.vaadin.ui.components.grid.DropIndexCalculator;
import com.vaadin.ui.components.grid.GridDragger;
import com.vaadin.ui.components.grid.GridRowDragger;
import com.vaadin.ui.components.grid.GridDropEvent;
import com.vaadin.ui.components.grid.SourceDataProviderUpdater;

public class GridDraggerTwoGridsTest {
public class GridRowDraggerTwoGridsTest {

public class TestGridDragger extends GridDragger<String> {
public class TestGridRowDragger extends GridRowDragger<String> {

public TestGridDragger(Grid<String> source, Grid<String> target) {
public TestGridRowDragger(Grid<String> source, Grid<String> target) {
super(source, target);
}

@@ -40,7 +40,7 @@ public class GridDraggerTwoGridsTest {

private Grid<String> source;
private Grid<String> target;
private TestGridDragger dragger;
private TestGridRowDragger dragger;
private List<String> draggedItems;

@Before
@@ -48,7 +48,7 @@ public class GridDraggerTwoGridsTest {
source = new Grid<>();
target = new Grid<>();
target.addColumn(s -> s).setId("1");
dragger = new TestGridDragger(source, target);
dragger = new TestGridRowDragger(source, target);

target.setItems(); // setup to use list data provider
}

+ 2
- 2
uitest/src/main/java/com/vaadin/tests/components/grid/AbstractGridDnD.java View File

@@ -16,14 +16,14 @@ import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Layout;
import com.vaadin.ui.RadioButtonGroup;
import com.vaadin.ui.components.grid.GridDragSource;
import com.vaadin.ui.components.grid.GridDragger;
import com.vaadin.ui.components.grid.GridRowDragger;
import com.vaadin.ui.components.grid.GridDropTarget;

public abstract class AbstractGridDnD extends AbstractTestUIWithLog {

protected final Layout controls = new HorizontalLayout();

protected void initializeTestFor(GridDragger<Person> gridDragger) {
protected void initializeTestFor(GridRowDragger<Person> gridDragger) {
initializeTestFor(gridDragger.getGridDragSource().getGrid(),
gridDragger.getGridDropTarget().getGrid(),
gridDragger.getGridDragSource(),

uitest/src/main/java/com/vaadin/tests/components/grid/GridDraggerOneGrid.java → uitest/src/main/java/com/vaadin/tests/components/grid/GridRowDraggerOneGrid.java View File

@@ -20,11 +20,11 @@ import com.vaadin.annotations.Widgetset;
import com.vaadin.server.VaadinRequest;
import com.vaadin.tests.util.Person;
import com.vaadin.ui.Grid;
import com.vaadin.ui.components.grid.GridDragger;
import com.vaadin.ui.components.grid.GridRowDragger;

@Theme("valo")
@Widgetset("com.vaadin.DefaultWidgetSet")
public class GridDraggerOneGrid extends AbstractGridDnD {
public class GridRowDraggerOneGrid extends AbstractGridDnD {

@Override
protected void setup(VaadinRequest request) {
@@ -32,7 +32,7 @@ public class GridDraggerOneGrid extends AbstractGridDnD {

Grid<Person> grid = createGridAndFillWithData(50);

GridDragger<Person> gridDragger = new GridDragger<>(grid);
GridRowDragger<Person> gridDragger = new GridRowDragger<>(grid);

initializeTestFor(gridDragger);
}

uitest/src/main/java/com/vaadin/tests/components/grid/GridDraggerTwoGrids.java → uitest/src/main/java/com/vaadin/tests/components/grid/GridRowDraggerTwoGrids.java View File

@@ -22,12 +22,12 @@ import com.vaadin.tests.util.Person;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.Grid;
import com.vaadin.ui.components.grid.DropIndexCalculator;
import com.vaadin.ui.components.grid.GridDragger;
import com.vaadin.ui.components.grid.GridRowDragger;
import com.vaadin.ui.components.grid.SourceDataProviderUpdater;

@Theme("valo")
@Widgetset("com.vaadin.DefaultWidgetSet")
public class GridDraggerTwoGrids extends AbstractGridDnD {
public class GridRowDraggerTwoGrids extends AbstractGridDnD {

@Override
protected void setup(VaadinRequest request) {
@@ -39,7 +39,7 @@ public class GridDraggerTwoGrids extends AbstractGridDnD {
// Drop target Grid
Grid<Person> right = createGridAndFillWithData(0);

GridDragger<Person> gridDragger = new GridDragger<>(left, right);
GridRowDragger<Person> gridDragger = new GridRowDragger<>(left, right);

CheckBox addItemsToEnd = new CheckBox("Add Items To End", false);
addItemsToEnd.addValueChangeListener(

uitest/src/main/java/com/vaadin/tests/components/grid/GridDraggerTwoGridsBothWays.java → uitest/src/main/java/com/vaadin/tests/components/grid/GridRowDraggerTwoGridsBothWays.java View File

@@ -23,11 +23,11 @@ import com.vaadin.tests.util.Person;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Layout;
import com.vaadin.ui.components.grid.GridDragger;
import com.vaadin.ui.components.grid.GridRowDragger;

@Theme("valo")
@Widgetset("com.vaadin.DefaultWidgetSet")
public class GridDraggerTwoGridsBothWays extends AbstractGridDnD {
public class GridRowDraggerTwoGridsBothWays extends AbstractGridDnD {

@Override
protected void setup(VaadinRequest request) {
@@ -36,8 +36,8 @@ public class GridDraggerTwoGridsBothWays extends AbstractGridDnD {
Grid<Person> left = createGridAndFillWithData(25);
Grid<Person> right = createGridAndFillWithData(25);

GridDragger<Person> leftToRight = new GridDragger<>(left, right);
GridDragger<Person> rightToLeft = new GridDragger<>(right, left);
GridRowDragger<Person> leftToRight = new GridRowDragger<>(left, right);
GridRowDragger<Person> rightToLeft = new GridRowDragger<>(right, left);

leftToRight.getGridDragSource()
.addDragStartListener(event -> rightToLeft.getGridDropTarget()

Loading…
Cancel
Save