After upgrade to SmartGWT 5.0 TileGrid will keep flashing after dragging

[leeyuiwah]

I recently upgraded to SmartGWT 5.0. After that, I noticed that the "drag and drop" behavior has changed. Specifically, I noticed that a tileRecord will keep flashing once it is dragged from a source tileGrid to a target tileGrid. I am including a simple test program below that can reproduce the problem.

The problem was not there when I was using SmartGWT 3.1; but it there now that I am using SmartGWT 5.0. I tried two different snapshots of 5.0 and both had the same problem.

5.0-p20141218
5.0-p20150129

package foo.bar;


import java.util.ArrayList;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.DragDataAction;
import com.smartgwt.client.types.SelectionStyle;
import com.smartgwt.client.types.VerticalAlignment;
import com.smartgwt.client.widgets.events.DragStopEvent;
import com.smartgwt.client.widgets.events.DragStopHandler;
import com.smartgwt.client.widgets.events.DropOverEvent;
import com.smartgwt.client.widgets.events.DropOverHandler;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.layout.VStack;
import com.smartgwt.client.widgets.tile.TileGrid;
import com.smartgwt.client.widgets.tile.TileRecord;
import com.smartgwt.client.widgets.tile.events.RecordClickEvent;
import com.smartgwt.client.widgets.tile.events.RecordClickHandler;
import com.smartgwt.client.widgets.tile.events.RecordDoubleClickEvent;
import com.smartgwt.client.widgets.tile.events.RecordDoubleClickHandler;
import com.smartgwt.client.widgets.viewer.DetailViewerField;

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
//  This issue appears from version 5.0:  5.0-p20141218
//  The same code works fine in smartget3.1
//
//  Issue:
// I created 2 tiles: sourceTileList and an empty targetTileList
// User can drag and drop tile from source to target.
// Whenever user click, doubleClikc or drag/drop a tile, the System.out will print out a message to console.
// 
// === How to repeat the problem:
// When user drag and drop the tile "AAAAA" to target, both source and target start flashing.
///////////////////////////////////////////////////////////////////////////////////////////////////////////////

public class TestVersion50 implements EntryPoint {
    private  TileGrid sourceList  = null;
    private  TileGrid targetList = null;
    private final HLayout hLayout = new HLayout(10);
    
    @Override
    public void onModuleLoad() {
        VLayout vLayout = new VLayout(20);  
        vLayout.setMargin(10);  
        vLayout.setWidth100();
        vLayout.setHeight100();
        
  
        createDragDropList();
  
        vLayout.addMember(hLayout);  
        vLayout.draw();  
    }

    private void createDragDropList(){

        sourceList = new TileGrid(){
            @Override
            protected String getTileHTML(Record record) {
                String tileHTML = super.getTileHTML(record);
                String title = record.getAttribute("title");
                return "<div title=\"" + title + "\">" + tileHTML + "<div/>";
            }
        };

        sourceList.setWidth("55%");
        sourceList.setHeight("100%");
        sourceList.setTileWidth(100);
        sourceList.setTileHeight(100);
        sourceList.setWrapValues(true);
        sourceList.setCanAcceptDrop(false);
        sourceList.setCanDragTilesOut(true);
        sourceList.setDragDataAction(DragDataAction.COPY);
        sourceList.setCanReorderTiles(false);
        sourceList.setCanDrag(false);  // this call make the new dim added to the end, not the beginning.
        sourceList.setShowEdges(true);
        sourceList.setPreventDuplicates(true);
        sourceList.setShowAllRecords(true);
        sourceList.setSelectionType(SelectionStyle.SINGLE);
        sourceList.addRecordDoubleClickHandler(new RecordDoubleClickHandler(){
            @Override
            public void onRecordDoubleClick(RecordDoubleClickEvent event) {
                System.out.println("Click on sourceList: onRecordDoubleClick");
            }
        });

        ArrayList<TileRecord> arr = new ArrayList<TileRecord>();
        TileRecord onerec;
 
          onerec = new TileRecord();
          onerec.setAttribute("dimensionName", "AAAAA");
          onerec.setAttribute("dimensionEnumName",  "AAAAA");
          onerec.setAttribute("title", "AAAAA");
          arr.add(onerec);
              
              
        DetailViewerField pictureField = new DetailViewerField("dimensionIcon");
        pictureField.setType("image");
        pictureField.setImageURLPrefix("");
        DetailViewerField nameField = new DetailViewerField("dimensionName");

        sourceList.setFields(pictureField, nameField);
        sourceList.setData( arr.toArray (new TileRecord[arr.size()]) );
        sourceList.addRecordClickHandler(new RecordClickHandler() {
            @Override
            public void onRecordClick(RecordClickEvent event) {
                System.out.println("Click on sourceList: onRecordClick");
            }
         });


        targetList = new TileGrid();
        targetList.setWidth("40%");
        targetList.setHeight("100%");
        targetList.setTileWidth(100);
        targetList.setTileHeight(100);
        targetList.setCanAcceptDrop(true);
        targetList.setCanDragTilesOut(true);
        targetList.setDragDataAction(DragDataAction.MOVE);
        targetList.setCanReorderTiles(false);
        targetList.setCanDrag(false);  // this call make the new dim added to the end, not the beginning.
        targetList.setShowEdges(true);
        targetList.setPreventDuplicates(true);
        DetailViewerField pictureField2 = new DetailViewerField("savedIcon");
        pictureField2.setType("image");
        pictureField2.setImageURLPrefix("");
        DetailViewerField nameField2 = new DetailViewerField("dimensionName");
        targetList.setFields(pictureField2, nameField2);
        targetList.setData(new Record[]{});
        targetList.addRecordDoubleClickHandler(new RecordDoubleClickHandler(){
            @Override
            public void onRecordDoubleClick(RecordDoubleClickEvent event) {
                System.out.println("Click on targetList: onRecordDoubleClick");
            }
        });

        targetList.addDropOverHandler(new DropOverHandler(){
            @Override
            public void onDropOver(DropOverEvent event) {
                System.out.println("Click on targetList: addDropOverHandler");
            }
        }
        );
        targetList.addRecordClickHandler(new RecordClickHandler() {
            @Override
            public void onRecordClick(RecordClickEvent event) {
                System.out.println("Click on targetList: onRecordClick");
            }
         });

        targetList.addDragStopHandler(new DragStopHandler(){
            @Override
            public void onDragStop(DragStopEvent event) {
                System.out.println("Click on targetList: onDragStop");
            }
        });

        VStack transferStack = new VStack(3);
        transferStack.setHeight(400);
        transferStack.setWidth("16%");
        transferStack.setAlign(VerticalAlignment.CENTER);


        
        hLayout.addMember(sourceList);
        hLayout.addMember(targetList);

        return;

    }
    
    
}

We tried both Firefox and Chrome and both had the same problem.

[Isomorphic]

This has been fixed in SGWT 5.0p and newer. Check the nightly builds that will be available tomorrow.

[leeyuiwah]

Thanks! Indeed the new build (5.0-p20150203) fixed the problem.