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?
Code:
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:
Code:
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"
Code:
.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.