A neat control that I have created that I thought I would share is an extension of Microsoft’s ASP.NET TreeView control that allows for nodes on the tree to be rearranged by simply dragging and dropping them. This was originally built for a project I was working on awhile back but I found the control so cool I decided to keep it.
How it works: The extended tree works just like the original one provided in the ASP.Net 2.0 library but has the additional capability of rearranging the nodes on the tree by simply dragging and dropping a node onto the new parent node. Dragging and dropping works by holding down the left mouse button and dragging the node to its new location. As the node is dragged around on the tree you will see a shadow copy of the node you are moving as well as a highlighting of the other tree nodes as you move over them. When you are hovering over the node you wish to drop your selected node into simply release the right mouse and then BAM, the node has now been moved. Below is a screen shot of the drag/drop on the tree in action.
Figure 1 – Screenshot of Drag and Drop TreeView
I have supplied the source code for this control below but l will go over the new properties and event handlers you should be aware of.
EnableDragAndDrop property: as its name implies, this is simply a new property on the tree view that allows a user/developer to enable or disable the ability to drag and drop tree nodes.
NodeDropConfirmationMessage property: this is where you would set the text you would like to display to the user when they drop a node. The purpose for this is to give the user a confirmation of their action and give them the ability to cancel the drop if it was in error. If no value is set on this property, no confirmation message will be displayed and every drop action will be performed.
TreeNodeDropped event: this is the event called after a user has dropped a node onto another node. Handle this event if you wish to handle the dropped event in some special way, like if you need to persist the change to a database or fire off some other events. That being said, this event doesn’t have to be handled for the dropped node to show up in its new location on the TreeView because the TreeView’s viewstate is updated and the TreeView is redrawn to display the changes.
The above are all an implementer needs to know about in order to use this new feature. Now I will quickly go over the files that are included in the source I am providing. I will not go into too much detail on the specific changes but rather what class files are changed/added in order for the new feature to work.
TreeView class: this is the class that inherits from Microsoft’s TreeView control. While I kept the name the same as Microsoft’s control, if you find that too confusing you are more than welcome to give your class another name. Essentially this is the class a user/implementer would interact with for using this new feature and is the one that contains the new properties and event I described above.
TreeViewNode class: this is a class that inherits from Microsoft’s TreeViewNode control. This was necessary in order for me to add the new client side event handler for handling the moving of the node on the tree. Again, if you find the name too confusing since I kept it the same as the base class, you can change it, just make sure you update the reference to this class in your new TreeView class.
TreeNodeDroppedEventArgs: this is the class used to passed what TreeViewNode moved and what TreeViewNode received the drop to the TreeNodeDropedEvent handler.
TreeView.js: this is the file that contains all of the javascript needed to move, track, and drop a TreeViewNode. I coded the TreeView class to register this file as an embedded resource so if you change the namespace from what is in the source code, you will need to make sure you change the registration and retrieval of this file to match your namespace. You can fine more information about doing that here.
Well, I hope everyone finds this blog useful. I know it is nice to finally get some of my custom controls out there for other developers to use since I have been “building off the backs of giants” myself for so many years that I felt guilty I never gave back. As always if there are any questions or problems with this blog or my source code, please make sure to leave a comment and I will get back to you as soon as I can. Cheers!