Drag and Drop Problem with Checkbox TreeGrid

[rraulli]

Versions: Smart GWT 3.0 Full-Featured Trial, LGPL 2.5 & LGPL 3.0

Browsers: Firefox 9.0.1, Google Chrome 16.0.912.75 m, Internet Explorer 8

I’m currently evaluating the Smart GWT 3.0 Full-Featured trail version and was attempting to modify the TreeDragReparentSample Class posted on your Smart GWT Showcase Web Site to use check boxes for the nodes and leaves. The only modification I made to the class was to set the Selection Appearance to CHECKBOX. See attached file. The tree’s appearance was updated appropriately but the drag and drop behavior did not function as expected.

The first thing I noticed was that a node/leaf could not be dragged unless it was checked. The second thing I noticed was that if two or more nodes/leaves were selected and I attempted to drag and drop a node/leaf that was not the upper most node/leaf that was selected in the tree, the upper most node/leaf that was selected was the node/leaf that got moved to the drop target.

Are there other property settings that need to be set in order to create the same drag and drop behavior experience in trees that don’t display their nodes/leaves as checkboxes or is this a bug that hasn’t been reported before?

[Isomorphic]

In tree displays in general (not just in our product), dragging operates on selected nodes. Mousedown causes selection, so this is why you can just click and drag.

By enabling both modes together you've created an odd UI: the user will generally expect all selected nodes to be dragged but the mousedown that initiates drag no longer causes selection. You could resolve this by adding a mouseDown handler that programmatically selects the target row regardless of where you click in a row, but this still a bit awkward, and you should probably go back and rethink things at a user interaction design level.

[rraulli]

I guess the behavior I was expecting to see in a DnD Checkbox TreeGrid was more like that which is found at the now defunct GWT-Ext project’s showcase site http://gwt-ext.com/demo/#checkboxTree, which touts itself as a predecessor to SmartGWT at this site http://code.google.com/p/gwt-ext/.

In the GWT-Ext Showcase example, selection does not occur when clicking on the text to the right of the checkbox tree item. It occurs when you click on the checkbox itself. This resembles more of the old school check box item selection paradigm but it raises the question of what really is considered to be the selection of an item in a checkbox tree. Is it a mouse down event, as you infer from your response, or is it when a mouse up event is detected and no drag of the item within the tree was detected (the mouse moved outside of the boundaries of the item after the mouse down).

This is my first post to any sort of technical forum so I greatly appreciate your prompt response. As far as how you envision the DnD functionality in a checkbox tree should implemented, I’ll leave that up to you but I hope you could at least take a look at how the DnD checkbox tree functions at the site mentioned above and consider bringing back some sort of compromise of how it worked into SmartGWT and thus saving many software engineers the time of trying to figure out how to add DnD mouse listeners to checkbox tree items and subsequently reorder the records in the under lying data structure.

Thanks again.

[Isomorphic]

In that tree, when you drag, you drag only what you clicked on - not the set of selected nodes. There are two different notions of selection going on - selected for drag, and selected for something else. Note how clicking and releasing "selects" a node (blue highlight) while not checking the node.

Is this what you're looking for - two different types of selection at once?

[rraulli]

When you press the left mouse button down in the middle of the text displayed to the right of the checkboxes In the tree, demo’d at the http://gwt-ext.com/demo/#checkboxTree site, you can drag and drop the item to a new location, whether the checkbox is selected or not. If you press the left mouse down in the middle of the checkbox at that site, you can’t drag the item to a new location, you can only check or uncheck the selected checkbox. This type of reordering behavior is what I expected would have resulted in the SmartGWT TreeGrid when I set the Selection Appearance to CHECKBOX, as demonstrated in the attached code.

Whether or not you agree with my vision of selection, and drag and drop behavior for a Checkbox Tree, the problem I mentioned in my original post remains if you set the Selection Appearance to CHECKBOX as demonstrated in the attached code.

The scenario being as follows:

1. Add the line of code that sets the selection appearance of the SmartGWT Tree Drag Re-parent Sample hosted at your Showcase Site (http://www.smartclient.com/smartgwt/showcase/#tree_interaction_drag_reparent) to CHECKBOX.
2. Open the updated example in a browser.
3. Check a node near the top of the tree.
4. Check a node near the bottom of the tree.
5. Left mouse down in the middle of the text displayed to the right of the node you selected at the bottom of the tree and drag it up one position.
6. The node that you selected in step 3 gets moved to the position where you just dragged the node in step 5 to.

No matter what your thoughts are on Drag and Drop Checkbox Trees, the above scenario seems like a bug to me. One solution might be to override the reorder setting in a TreeGrid when the selection appearance is set to CHECKBOX and add the fact that this is the case to the JavaDoc or allow checkboxes to be dragged and dropped in a similar fashion demonstrated on the aforementioned web site.

I realize that this seems like a dual purpose post (a bug and a wish to have) but the reason I would like to see this functionality is because I code web apps that have to do with maps, the display layers within the map and the order in which the layers are displayed (i.e OpenLayers). Previously I used Flex to implement my web apps but with the end of Flash development for mobile apps, I’m looking for an alternative framework to accomplish this functionality.

Thanks.

[Isomorphic]

Once again, not a bug, it's the same behavior from before. You are coming with the expectation that the checkbox state is totally independent of record selection, but it isn't - the properties do what they say - the way that selection works is exactly the same as how selection works when you don't use checkboxes - whatever is selected, is dragged.

To put it another way, when one (or more) records have the blue highlight meaning they were just clicked, and one or more records are checked, clearly you need separate APIs to get to each list of records.

A built-in mode to have checkboxes similar to selectionAppearance:checkbox that just store data in some attribute on the TreeNode makes sense, and you could sponsor it if you need it.

To implement it yourself, turn off the built-in checkbox selection mode and add your own checkboxes. It's trivial to do this as a separate column (just add a column of type:"boolean" and set canToggle:true); to get an appearance closer to selectionAppearance:checkbox you'll want to override either the nodeIcon or extraIcon to be a checkbox, and add click handlers to toggle it's appearance.

[rraulli]

For my last post, I just want to thank you for taking the time to reply to my previous posts. I have but one more question that you need not reply to; did you ever go to the "http://gwt-ext.com/demo/#checkboxTree" site and observe how the checkbox selection/DnD behavior functioned?

Thanks again.

[Isomorphic]

?? In our post #4 we referred specifically to details of its behavior, so yes.