Curl Global Community
TreeControl with Draggable Nodes and Json Data - Printable Version

+- Curl Global Community (https://communities.curl.com)
+-- Forum: Widgets/Gadgets/Curlets (https://communities.curl.com/forumdisplay.php?fid=15)
+--- Forum: Code Samples (https://communities.curl.com/forumdisplay.php?fid=16)
+--- Thread: TreeControl with Draggable Nodes and Json Data (/showthread.php?tid=95)



TreeControl with Draggable Nodes and Json Data - ashimo - 07-01-2011

This is a customized TreeControl that supports data binding and rearranging the nodes by drag and drop. The value of the control is represented as a JSON string.

The test applet shows the tree at the left and a TextArea at the right. Both are bound to the "data" field of the same RecordSet, so editing either one will affect the other one. As you drag nodes around in the tree, you'll see the string value change in the TextArea. If you edit in the TextArea (tab away to "finish" the edit), the tree will be updated to match. If you create bad JSON, it will throw an exception, of course, so do something simple like changing a + to a -!

When you drop a node, the JsonTreeItem.move method is invoked. This rearranges the nodes as appropriate and updates the data value. This causes the control to rebuild the UI as needed.

There can be improved but it is a good start. One thing I haven't done yet is to recognize when the item is dropped at some amount of indent. In that case, the dropped node should go in as a child node.

jsontree.zip