TreeGrid styling on drag and drop to change baseStyle

[skomarla]

dropOut is for the grid as a whole. You need to refresh both the row being entered and left on dropMove.

Thank you.

The only way I think of, but perhaps slightly naive at the moment, is to track the most recent previous row that the onDropMove was called for, and subsequently issue a refreshRow on that as well.

Is that what you mean? Please let me know if there is a better way.

Thanks again.

private Integer prevDropMoveRow;

<snip>
@Override
public void onDropMove(DropMoveEvent event) {

	int rowNum = employeeTreeGrid.getRecordIndex(employeeTreeGrid.getDropFolder());
	textArea.setValue(textArea.getValueAsString() + "\n  onDropMove: " + rowNum);
	if (prevDropMoveRow != null && prevDropMoveRow >= 0 && prevDropMoveRow != rowNum) {
		employeeTreeGrid.refreshRow(prevDropMoveRow);
	}
	if (rowNum >= 0) {
		employeeTreeGrid.refreshRow(rowNum);
		prevDropMoveRow = rowNum;
	}
}

[Blama]

2. firefox 24.3.0 ESR (FF 27.0.1 does not seem to be supported for dev mode)

As quick note:
Eclipse / Firefox Dev Mode is dead starting with FF27 (see this link in the GWT google groups).

Possibilities now include:

• Super Dev Mode (Client debugging with Source Maps in Chrome or Firefox)
• Stay with FF26 or FF24.4 ESR

I'll stay with FF26 until SDM gets IDE debugging support, perhaps with GWT 3.0 (expected later this year).

See the GWT.create 2013 keynote on this (http://gwtcreate.com/2013/videos/#gwt-keynote, time 32:41)

Best regards,
Blama

[Isomorphic]

If everything is a folder, getDropFolder() and getEventRow() will agree.

dropOut is for the grid as a whole. You need to refresh both the row being entered and left on dropMove.

[skomarla]

getDropFolder() returns the folder where the added records would be placed. This is not necessarily the same as the current record that the cursor is over, which you can get from getEventRow().

Also, it doesn't look like you've got any code that would refresh *the row the mouse just left*, which is what you need to clean up the custom styling you're applying while the cursor is over that row.

Thank you for the reply.

Regarding the getDropFolder(). right, my intention was to paint the actual row that the drop would create children under. therefore, i had turned on defaultIsFolder=true and canDropOnLeaves=true to allow for the node creation under the leaf nodes. should getEventRow() return the index of the record returned by getDropFolder() at that point?

regarding refreshing the *the row the mouse just left*, my interpretation of dropOutHandler made me think that was what it was doing. i.e when the mouse leaves the row, refresh the row, which should call the getBaseStyle. Is there an alternate way that I am missing?

thanks again

[Isomorphic]

getDropFolder() returns the folder where the added records would be placed. This is not necessarily the same as the current record that the cursor is over, which you can get from getEventRow().

Also, it doesn't look like you've got any code that would refresh *the row the mouse just left*, which is what you need to clean up the custom styling you're applying while the cursor is over that row.

[skomarla]

Hello All,

I am experience some strange behavior when attempting to style a row in a tree grid when a user is attempting to drop a record.

I am on the newest nightly build using a slightly outdated firefox

1. SmartGWT 4.1p 2014-03-16

2. firefox 24.3.0 ESR (FF 27.0.1 does not seem to be supported for dev mode)


I think I have followed various instructions on this forum on how to go about doing so.

1) I created a standalone module that changes the background color via assigning a new base style in by overriding getBaseStyle.
2) I also added drop move, drop out and drop over handlers.

What seems to happen is that the new basestyle does get assigned when the mouse enters a row, but when the user leaves the initial row and moves to another row, the previous drop row's basestyle does not seem to reset until the drop has been completed. This creates the visual affect where multiple rows get styled as the user makes their way to the final drop row.

In the screen shot, this is seen when multiple rows get the aqua background color. Here, I tried to drag the tree node "Olivier Hebert" onto "Kay Monroe"

What am I doing incorrectly? I would like only Kay Monroe to remain styled with the revised basestyle

I also noticed that onDropOver and onDropOut did not get called until I released the mouse to finish the drop. Perhaps I am misusing them, and I should use something else?

public class TreeDragHighlightDropSample implements EntryPoint {

	public static final TreeNode[] employeeData = new TreeNode[] {
			new EmployeeTreeNode("4", "1", "Charles Madigen", "Chief Operating Officer", true),
			new EmployeeTreeNode("188", "4", "Rogine Leger", "Mgr Syst P P", true),
			new EmployeeTreeNode("262", "188", "Jacques Desautels", "Line Wrker A", false),
			new EmployeeTreeNode("261", "188", "Kay Monroe", "Stn Opr", false),
			new EmployeeTreeNode("260", "188", "Francine Dugas", "Fire Sec Off", false),
			new EmployeeTreeNode("259", "188", "Jacques Leblanc", "Purch Clk", false),
			new EmployeeTreeNode("258", "188", "Ren Xian", "Mobile Eq Opr", false),
			new EmployeeTreeNode("257", "188", "Olivier Hebert", "Met Read/Coll", false)};

	public void onModuleLoad() {

		VLayout layout = new VLayout();
		DynamicForm form = new DynamicForm();
		final TextAreaItem textArea = new TextAreaItem();
		textArea.setShowTitle(false);
		textArea.setWidth(500);
		textArea.setHeight(300);
		textArea.setValue("events will be tracked here");
		form.setItems(textArea);
		layout.addMember(form);

		Tree employeeTree = new Tree();
		employeeTree.setModelType(TreeModelType.PARENT);
		employeeTree.setRootValue(1);
		employeeTree.setNameProperty("Name");
		employeeTree.setIdField("EmployeeId");
		employeeTree.setParentIdField("ReportsTo");
		employeeTree.setOpenProperty("isOpen");
		employeeTree.setDefaultIsFolder(true);

		employeeTree.setData(employeeData);

		TreeGridField nameField = new TreeGridField("Name");

		final TreeGrid employeeTreeGrid = new TreeGrid() {

			protected String getBaseStyle(ListGridRecord record, int rowNum, int colNum) {
				String baseStyle = super.getBaseStyle(record, rowNum, colNum);
				Canvas dragTarget = EventHandler.getDragTarget();
				boolean dragging = dragTarget != null;

				if (dragTarget == this) {
					Record[] dragRecords = getDragData();
					if (dragRecords != null && dragRecords.length == 1) {

						if (dragRecords[0].getAttributeAsString("EmployeeId").equals(
								record.getAttributeAsString("EmployeeId"))) {
							// in the event of a single click, sometimes we get a drag event that seems to start
							// if the drag data is the same as the record beign dropped on, use the base style
							return baseStyle;
						}
					}
				}

				TreeNode dropFolder = getDropFolder();
				if (dragging && dropFolder != null && record != null) {
					int dropIndex = getRecordIndex(dropFolder);
					int recIndex = getRecordIndex(record);
					if (dropIndex == recIndex) {
						textArea.setValue(textArea.getValueAsString() + "\nsetting drop style on rowNum: " + rowNum + " colNum: " + colNum);
						
						return "myTreeCellDrop";
					}
				}
				return baseStyle;
			}
		};

		employeeTreeGrid.setWidth(500);
		employeeTreeGrid.setHeight(400);
		employeeTreeGrid.setIconSize(0);
		employeeTreeGrid.setShowDropLines(false);
		employeeTreeGrid.setCanDropOnLeaves(true);
		employeeTreeGrid.setBaseStyle("myTreeCell");
		employeeTreeGrid.setSelectionType(SelectionStyle.SINGLE);

		employeeTreeGrid.setCanReorderRecords(true);
		employeeTreeGrid.setCanAcceptDroppedRecords(true);
		employeeTreeGrid.setShowOpenIcons(false);
		employeeTreeGrid.setDropIconSuffix("into");
		employeeTreeGrid.setClosedIconSuffix("");
		employeeTreeGrid.setData(employeeTree);
		employeeTreeGrid.setFields(nameField);

		employeeTreeGrid.addDropOutHandler(new DropOutHandler() {

			@Override
			public void onDropOut(DropOutEvent event) {

				int rowNum = employeeTreeGrid.getRecordIndex(employeeTreeGrid.getDropFolder());
				textArea.setValue(textArea.getValueAsString() + "\n  onDropOut: " + rowNum);
				if (rowNum >= 0) {

					employeeTreeGrid.refreshRow(rowNum);
				}
			}
		});

		employeeTreeGrid.addDropOverHandler(new DropOverHandler() {

			@Override
			public void onDropOver(DropOverEvent event) {

				int rowNum = employeeTreeGrid.getRecordIndex(employeeTreeGrid.getDropFolder());
				textArea.setValue(textArea.getValueAsString() + "\n  onDropOver: " + rowNum);
				if (rowNum >= 0) {

					employeeTreeGrid.refreshRow(rowNum);
				}
			}
		});

		employeeTreeGrid.addDropMoveHandler(new DropMoveHandler() {

			@Override
			public void onDropMove(DropMoveEvent event) {

				int rowNum = employeeTreeGrid.getRecordIndex(employeeTreeGrid.getDropFolder());
				textArea.setValue(textArea.getValueAsString() + "\n  onDropMove: " + rowNum);
				if (rowNum >= 0) {
					employeeTreeGrid.refreshRow(rowNum);
				}
			}
		});

		layout.addMember(employeeTreeGrid);
		
		
		
		layout.draw();
	}

	public static class EmployeeTreeNode extends TreeNode {

		public EmployeeTreeNode(String employeeId, String reportsTo, String name, String job, boolean isOpen) {
			setAttribute("EmployeeId", employeeId);
			setAttribute("ReportsTo", reportsTo);
			setAttribute("Name", name);
			setAttribute("Job", job);
			setAttribute("isOpen", isOpen);
		}
	}

}

I attempt to track the sequence of events in a text area. Its contents during a sample run:

events will be tracked here
  onDropOver: 7
  onDropMove: 7
  onDropMove: 6
setting drop style on rowNum: 6 colNum: 0
setting drop style on rowNum: 6 colNum: 0
  onDropMove: 1
setting drop style on rowNum: 1 colNum: 0
setting drop style on rowNum: 1 colNum: 0
  onDropMove: 5
setting drop style on rowNum: 5 colNum: 0
setting drop style on rowNum: 5 colNum: 0
  onDropMove: 5
setting drop style on rowNum: 5 colNum: 0
setting drop style on rowNum: 5 colNum: 0
  onDropMove: 1
setting drop style on rowNum: 1 colNum: 0
setting drop style on rowNum: 1 colNum: 0
  onDropMove: 1
setting drop style on rowNum: 1 colNum: 0
setting drop style on rowNum: 1 colNum: 0
  onDropMove: 4
setting drop style on rowNum: 4 colNum: 0
setting drop style on rowNum: 4 colNum: 0
  onDropMove: 4
setting drop style on rowNum: 4 colNum: 0
setting drop style on rowNum: 4 colNum: 0
  onDropMove: 4
setting drop style on rowNum: 4 colNum: 0
setting drop style on rowNum: 4 colNum: 0
  onDropMove: 1
setting drop style on rowNum: 1 colNum: 0
setting drop style on rowNum: 1 colNum: 0
  onDropMove: 1
setting drop style on rowNum: 1 colNum: 0
setting drop style on rowNum: 1 colNum: 0
  onDropMove: 1
setting drop style on rowNum: 1 colNum: 0
setting drop style on rowNum: 1 colNum: 0
  onDropMove: 1
setting drop style on rowNum: 1 colNum: 0
setting drop style on rowNum: 1 colNum: 0
  onDropMove: 1
setting drop style on rowNum: 1 colNum: 0
setting drop style on rowNum: 1 colNum: 0
  onDropMove: 1
setting drop style on rowNum: 1 colNum: 0
setting drop style on rowNum: 1 colNum: 0
  onDropMove: 1
setting drop style on rowNum: 1 colNum: 0
setting drop style on rowNum: 1 colNum: 0
  onDropMove: 3
setting drop style on rowNum: 3 colNum: 0
setting drop style on rowNum: 3 colNum: 0
  onDropMove: 3
setting drop style on rowNum: 3 colNum: 0
setting drop style on rowNum: 3 colNum: 0
  onDropMove: 3
setting drop style on rowNum: 3 colNum: 0
setting drop style on rowNum: 3 colNum: 0
  onDropMove: 3
setting drop style on rowNum: 3 colNum: 0
setting drop style on rowNum: 3 colNum: 0
  onDropMove: 3
setting drop style on rowNum: 3 colNum: 0
setting drop style on rowNum: 3 colNum: 0
  onDropOut: 3
setting drop style on rowNum: 3 colNum: 0

the css though i'm not sure if the issue is here"

.myTreeCell,
.myTreeCellDark,
.myTreeCellOver,
.myTreeCellOverDark,
.myTreeCellSelected,
.myTreeCellSelectedDark,
.myTreeCellSelectedOver,
.myTreeCellSelectedOverDark,
.myTreeCellDisabled,
.myTreeCellDisabledDark  {
	 border-top:1px solid black;
	 background-color: transparent;
}


.myTreeCellDrop,
.myTreeCellDropDark,
.myTreeCellDropOver,
.myTreeCellDropOverDark,
.myTreeCellDropSelected,
.myTreeCellDropSelectedDark,
.myTreeCellDropSelectedOver,
.myTreeCellDropSelectedOverDark,
.myTreeCellDropDisabled,
.myTreeCellDropDisabledDark  {
	border-top:1px solid black;
	background-color: aqua;
}

A related question:
Is there a way to prevent Rogine Leger from getting styled?

Thank you for taking the time. I've spent a few days on this and I feel like I am missing something.