Dropping a note onto a treegrid

[pboysen]

The code below creates a "sticky note" (TextItem) to be dropped on the tree of Notes. The drop bar appears but I never get the dropped event. What am I missing?

package edu.iastate.its.thinkspace.gwt.client.guest;

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.DragAppearance;
import com.smartgwt.client.types.TreeModelType;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.HTMLFlow;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.events.DropEvent;
import com.smartgwt.client.widgets.events.DropHandler;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VStack;
import com.smartgwt.client.widgets.tree.Tree;
import com.smartgwt.client.widgets.tree.TreeGrid;
import com.smartgwt.client.widgets.tree.TreeGridField;
import com.smartgwt.client.widgets.tree.TreeNode;

public class TestCanvas extends Canvas {
	public TestCanvas() {
		VStack left = new VStack();
		left.setWidth("50%");
		left.addMember(new TextItem("drag this component"));
		VStack right = new VStack();
		right.setWidth("50%");
		right.addMember(new Notes());
		HLayout layout = new HLayout();
		layout.setWidth(400);
		layout.setHeight(400);
		layout.addMember(left);
		layout.addMember(right);
		addChild(layout);
	}
	
	class Notes extends Canvas {
		public Notes() {
			TreeGrid treeGrid = new TreeGrid();
			treeGrid.setWidth(300);  
			treeGrid.setHeight(400);  
			treeGrid.setCanAcceptDroppedRecords(true);
			treeGrid.setCanAcceptDrop(true);
			treeGrid.setCanReparentNodes(true);
			treeGrid.setCanReorderRecords(true);
			treeGrid.setCanDropOnLeaves(true);
			treeGrid.setShowHeader(false);
			treeGrid.setCanEdit(true);
			treeGrid.addDropHandler(new DropHandler() {
				public void onDrop(DropEvent e) {
					System.out.println("drop");
				}
			});
 
			TreeGridField field = new TreeGridField("Name", "Tree from local data");  
			field.setCanSort(false);  
			 
			treeGrid.setFields(new TreeGridField[]{field});  
			
			Tree tree = new Tree();  
			tree.setModelType(TreeModelType.PARENT);  
			tree.setNameProperty("Name");  
			tree.setIdField("EmployeeId");  
			tree.setParentIdField("ReportsTo");  
			tree.setShowRoot(true);  

			EmployeeTreeNode root = new EmployeeTreeNode("4", "1", "Charles Madigen");  
			EmployeeTreeNode node2 = new EmployeeTreeNode("188", "4", "Rogine Leger");  
			EmployeeTreeNode node3 = new EmployeeTreeNode("189", "4", "Gene Porter");  
			EmployeeTreeNode node4 = new EmployeeTreeNode("265", "189", "Olivier Doucet");  
			EmployeeTreeNode node5 = new EmployeeTreeNode("264", "189", "Cheryl Pearson");  
			tree.setData(new TreeNode[]{root, node2, node3, node4, node5});  
  
			tree.setRoot(root);  
  
			treeGrid.setData(tree);  
			addChild(treeGrid);
		}
	}

	class TextItem extends Canvas {
    	public TextItem(String text) {
     		setCanDrop(true);
			setCanDragReposition(true);
			setDragAppearance(DragAppearance.TARGET);
			setWidth(150);
	   		setBackgroundColor(Util.getBackgroundColor());
    		setOpacity(75);
    		setBorder("1px solid #ccc");
			setShowShadow(true);
			VStack stack = new VStack();
			stack.setPadding(5);
			stack.setDefaultLayoutAlign(Alignment.RIGHT);
			final TextItem item = this;
			Img delete = new Img("[SKINIMG]/actions/remove.png",16,16);
			delete.addClickHandler(new ClickHandler() {
				public void onClick(ClickEvent e) {
					item.destroy();
				}
			});
			HTMLFlow flow = new HTMLFlow(text);
			flow.setWidth(150);
			stack.addMember(delete);
			stack.addMember(flow);
			addChild(stack);
    	}
	}
    	
    class EmployeeTreeNode extends TreeNode {  
   
         public EmployeeTreeNode(String employeeId, String reportsTo, String name) {  
             setEmployeeId(employeeId);  
             setReportsTo(reportsTo);  
             setName(name);  
         }  
   
         public void setEmployeeId(String value) {  
             setAttribute("EmployeeId", value);  
         }  
   
         public void setReportsTo(String value) {  
             setAttribute("ReportsTo", value);  
         }  
   
         public void setName(String name) {  
             setAttribute("Name", name);  
         }  
     }  
}

[pboysen]

Found a better solution

I changed the above code to make the StickNote a treeGrid with one Note. It was then possible to drag the note to the TreeGrid and drop it.

[smartgwt.dev]

Neat idea!

[Isomorphic]

Slick solution :) Sorry we didn't get to it soon enough.

[cage97]

I actually have quite the same problem:

I would like to drop a Canvas element on a TreeNode element. I tried the proposed solution but...it doesn't really work. I created a pseudo note which is a TreeGrid object but I can't change the background color and stuff like that.

Also I'm not able to set a individual note text - I solved this problem via the empty message attribute of a TreeGrid but this is quite nasty...

I'm wondering how 'pboysen' used the single TreeNode element? My solution doesn't use a TreeNode within the TreeGrid since this definitely doesn't look like a real note anymore.

Any ideas?

[MaheshR]

Drag a Layout On TreeGrid

I'm trying to use tree grid as folders and correspondingly displaying a HLayout containing file names etc. Now i want to drag a file and drop onto the treegird(folder). But aftre dragging the file layout onto tree, there is no any changes in it. I was set treegrid to accept drops. Please reply soon

[pH4Lk0n]

Hi,

Why not display files on ListGrid??
When you drag&drop records you will have much more solutions and cleaner interface.

I've done something like that with mail messages and folders.
Maybe this will help. Worked for me:

emailMenu = new TreeGrid();
		
emailMenu.setCanAcceptDroppedRecords(true);
emailMenu.setCanDropOnLeaves(true);
		
emailMenu.addFolderDropHandler(new FolderDropHandler() {
	public void onFolderDrop(FolderDropEvent event) {
		event.cancel();
		
		Record target = event.getFolder(); // Folder

		Record[] nodes = event.getNodes(); // Dropped data
	}			
});

Best regards
Mariusz Goch

[MaheshR]

Thanks for the reply

Ya. But in order to enhance the UI, i had customised it creating a layout to show who uploaded it, when etc etc which is really good. So. I know that the treegrid accepts a record to be dropped on. But is there any way that this file layout can be converted to record on the fly and then drop it on to a folder?

[pH4Lk0n]

I don't know if it's possible but it would be quite useful. Maybe someone else will answer to this.
On the other hand you can format cellgrid to look like your layout using:

listGridField.setCellFormatter(CellFormatter formatter);

But you will have to return html instead of widget.