dragging a non-listgrid object to a listgrid

[dbscott525]

We have been developing a visual editor where we are using drag and drop to do add and remove. For example, we drag an icon to a layout or some other canvas to cause a new object to be added to the canvas. Or we drag an object contained within a canvas to a trash can icon to cause the object to be removed from the canvas.

Now we are trying to do this with a ListGrid.

Specifically, we would like to:

1. Drag an image to a specific position in a ListGrid to cause a record to be added to the ListGrid at that postion.
2. Drag a record/row from a ListGrid to our trash can icon and that would cause the record to be removed.

We will write the logic to remove or add objects based on drag and drop. However, we need to be able to have some kind of drop handler on the ListGrid to detect when something has been dropped.

Additionally, we need to be able to detect when a record from a ListGrid has been dropped on an image.

After looking through the SmartGWT showcase I was unable to find any API that would accomplish this.

Is there any API available for ListGrids that would meet our requirements?

[Isomorphic]

You are looking for the Canvas-level drag events and settings - canAcceptDrop, dragStart, dragMove, etc. Because the source of the drag is not a ListGrid, the ListGrid is not going to automatically respond with its usual drop position indicators - if you need those, you'll need to create that yourself. A possible simplification, if you don't feel up to this, is to make the images that you are dragging our of a ListGrid (no header, single record, single column, use a CellFormatter to draw the image).

For drags out, you'll need to set canAcceptDrop on the target and canDragRecordsOut on the ListGrid.

[dbscott525]

You are looking for the Canvas-level drag events and settings - canAcceptDrop, dragStart, dragMove, etc. Because the source of the drag is not a ListGrid, the ListGrid is not going to automatically respond with its usual drop position indicators - if you need those, you'll need to create that yourself. A possible simplification, if you don't feel up to this, is to make the images that you are dragging our of a ListGrid (no header, single record, single column, use a CellFormatter to draw the image).

This could work for us. However the image we’re dragging to the ListGrid is inside of a RibbonBar. So far we have only been putting IconButton and IconMenuButton into a RibbonGroup. Is it possible/compatible to put a ListGrid into a RibbonGroup?

[Isomorphic]

We're not sure how your question relates to what we were saying, but yes - you can put whatever you like into a RibbonGroup - this will show a ListGrid:

        ListGrid lg = new ListGrid();
        lg.setWidth(300);
        lg.setFields(new ListGridField("Field 1"));
        
        RibbonGroup rg = new RibbonGroup();
        rg.setTitle("ListGrid Group");
        rg.setNumRows(3);
        rg.addControl(lg);
        
        RibbonBar rb = new RibbonBar();
        rb.addGroup(rg);
        
        rb.draw();