Drag and Drop Rows on same Grid

Working with Grids Now we shall move on to the Next Concept is about  Drag and Drop Grid Items on same Grid.

A Grid component’s rows can be made draggable by applying GridDragSource extension to the component.

The extended Grid’s rows become draggable, meaning that each row can be grabbed and moved by the mouse individually. 


By default, the drag data of type "text" will contain the content of each column separated by a tabulator character ("\t"). When multiple rows are dragged, the generated data is combined into one String separated by new line characters ("\n"). You can override the default behaviour and provide a custom drag data for each item by setting a custom drag data generatorfor the "text" type. The generator is executed for each item and returns a String containing the data to be transferred for that item.

In the First Post we have Created A Pojo named Company ,A ListDataprovider,A Grid of type Company
and a List of type Company and Items added Vice Versa all that we know that basic Things we have to Do as the Prelimnary task Now what to add so that we can Drag and Drop Rows of the Grid.?

suppose We have created a Grid as 

Grid<Company> cmpgrid= new Grid<>(); 
GridDragSource<Company> dragSource = new GridDragSource<>(cmpgrid);

 dragSource.setEffectAllowed(EffectAllowed.MOVE);                           dragSource.setDragDataGenerator("text", person -> {

return person.getserialno() + " " + person.getname()

});                                                                                                                    

Grid Drag source is For applying the Drag and Drop in Particular Grid and set Effect is for the rows to be movable.

Next we have Two Listeners For Drag and Drop For Grid here the Code snippet is as Follows 

before Writing the Code have to Do the Task in the both the Listeners so what we can Do is that 

in the Drag StartListener We can take what the data we have where our Cursor is Pointing  to 

Make a file as DragDropGrid.java 

Class DragDropGrid{

Grid<Company> grid = new  Grid<>();
Optional<Company> dragged;                                                       //returns value by get method
GridDragSource<Company> dragSource = new GridDragSource<>(cmpgrid);

 dragSource.setEffectAllowed(EffectAllowed.MOVE);                           dragSource.setDragDataGenerator("text", person -> {

return person.getserialno() + " " + person.getname();

});                                                                                                                 

dragSource.addGridDragEndListener(event -> {

List<Company> list= new ArrayList<>(event.getDraggedItems());   // start listener -> get items
                if (!list.isEmpty()) {
                dragged = Optional.of(list.get(0));
            }
});

 dragSource.addGridDragEndListener(event -> {
            if (event.getDropEffect() == DropEffect.MOVE) {            //end listener refreshData provider
                grid.getDataProvider().refreshAll();
            }
        });


 GridDropTarget<Company> dropTarget = new GridDropTarget<>(grid, DropMode.ON_TOP); //given same grid in the arguements
     
 dropTarget.setDropEffect(DropEffect.MOVE);

     
        dropTarget.addGridDropListener(event -> {
            Optional<Company> dropTargetRow = event.getDropTargetRow();
            if (dropTargetRow.isPresent() && dragged.isPresent()) {                            // listener will get                                                                                                                                      the droped row and                                                                                                                                    we will replace it by                                                                                                               the content of the dragged items
           
                Company drag = dragged.get();
                Company drop = dropTargetRow.get();
                Collections.swap(company, company.indexOf(drag), company.indexOf(drop));
                dataProvider.refreshAll();
            }
        });    
}

Hope this would bring a new thing to you to work upon :) cheers

Draggable Rows