Automatic text selection with Compenant Art's Tree View

Over the last year I have been using Component Art's Web UI suite. I have a love hate relationship with their controls. I love how they are quick and easy to get some advanced UI functionality into your site. I hate their documentation and that some features which I would consider basic seem to be missing. I also want to take a moment and say they have a great tech support team, who has helped me quite a bit over the last year. But overall I would recommend the controls.

In a recent project, I had a tree view, which the user could create their own nested heirarchial tree, they could move the nodes around, and it worked very simillar to the experience you get with Windows Explorer. One minor feature which was missing, that I had wanted (and some of my test user's also asked for), was that when you go to edit the name of the node, select the text for them.

This is a basic UI paradigm that if I go to edit something it automaticly selects itself. When you look at the TreeView control you will see there is no event that indicates that a node is being edited; however, if you don't mind mucking around with a thrid party object (This is something that should not be done lightly CA makes no promises that this will work in future versions) there is a way to do this.

If you examine the TreeViewNode object you will find a method called Edit which is called when a node is supposed to go into Edit mode. By overridding this method we can provide our own implementation for method. The following code copies the Edit function into a new function EditOriginal. It then creates a new Edit function which calls the original function. The new function then uses Jquery to select an input which is a child of a TreeView class. If your not using Jquery or if your page structure is different you might need to modify that code to find the input element, and then select it.

        ComponentArt_TreeViewNode.prototype.EditOriginal = ComponentArt_TreeViewNode.prototype.Edit;

        ComponentArt_TreeViewNode.prototype.Edit = function() {

            this.EditOriginal();

            $('.TreeView input').select();

        }

There is an EditNodeCSS property which I was unable to get a selector working with it. If anyone does get a selection working off that let me know. I'd love to know where in the dom its used and when I try and look at it with my tools the node leaves edit mode.

Note: I want to thank Stephen Hatcher of Component Art's Tech Support team for his assistance in coming up with this solution.