My first thought on this was “With all the AJAX development going on, why has no one developed a tree view control?” This may seem like a strange question but remember in the dark ages of Web development (the days before AJAX and Web 2.0) when we are developers attempted to emulate rich desktop applications. During that time we would have a need for a tree-view. This is where the user can click the ‘+’ to expand the display and view children similar to Windows Explorer.
One of the major burdens of building this type of rich control before the days of AJAX was this. The developer would come to a fork in the road of his/her development. This fork would make the developer chose one of two paths of implementation. Path ‘a’ is to send all content to the client browser that will ever be needed for the tree-view control. Realize this could be hundreds of items. Most of which the user would never see because the child nodes would remain hidden. The second path ‘b’ of the fork would be to only provide enough information to the client to build the first level tree now. Then when the user selected a node to view (expand) this would force a call to the server and a page refresh to display the contents of that node. This of course goes against the AJAX process in that the entire client web page must be resent from the server.
So this is how I arrived building an AJAX tree-view control. It’s is pretty basic as it stands. Some things I’m working on adding are:
- Detail view control – On the right-side view is the details of the folder content. If have a desire to make this be something like Windows Explorer in that you can change the view from detail to thumb to whatever.
- Column expand/drag – This is something I’ve seen on other (before AJAX) controls where you can actually expand the column display.
- Search for nodes – This should allow the user to search the left-view tree for nodes. Should not be hard to implement.
I’ve put together an initial beta release. It’s not much on cool functionality. But it dows work and the folder tree is dynamic. Download the initial beta version here. Also feel free to test out the tool here.
Feel free to leave a comment below or check out other projects I’m working on here.