The menu is done, at least for now, and I’m switching gears towards implementing tree control. I want to be able to show explorer-like tree with a caveat. One of the requirements for the tree is to have any number of columns to show additional information about each node. I’m not sure if there will be support for preceding columns in addition to the columns after the main tree. I guess that depends on how hard it will be to do.

There are many tree controls available on the Internet, but practically none of them support columns. In addition, JavaScript use is often required to generate the tree after the page is loaded and in most cases there are two copies of the tree, visual in DHTML objects and behind the scene in JavaScript objects. I want to have the freedom of either generating the tree through JavaScript or generating HTML and just creating Tree object that will attach itself to the generated HTML and initialize with minimum overhead.

In the past, I’ve created a tree that relies on TABLE tag to show the actual tree (based on http://www.codeproject.com/asp/asptreelistcontrol.asp). This technique works ok with one problem. It’s impossible to have nested rows or nested groups of rows. To expand or collapse a tree node I had to iterate through table rows and show or hide one row at a time. This proved to be a bottleneck as the tree grew larger and eventually I realized that to fix the problem I have to move to a different implementation.

An alternative to the table is to use block elements, DIV for example, like it's done in this project. Initially everything looked good, until I got to the point of implementing columns. The problem is to align column cells vertically in a straight line while making sure the width of the tree is not fixed. It would also be nice if all of the columns would align at the rightmost edge of the tree. I practically gave up on having columns width fluid and in most cases it should not be a big problem anyway. I’ve been playing around with flow and absolute positioning, but haven’t found a universal solution yet. One of the problems is that columns aligned in a vertical line must not rely directly on the tree nodes. At the same time, it would be good to have each column cell defined inside of the node element to which it belongs, just as TD elements are defined inside TR elements in TABLE. I’ve considered having columns in a separate block, but connecting each column cell to the appropriate node might get complicated especially during collapse/expand, and the whole point of using DIV is to decrease complexity and speed up the code.

I’ve figured two ways to separate the columns from the tree. One is to float the columns away, to the right for example, and another is to make their position absolute. Absolute positioning is really the preferred way of doing it. In IE if position is absolute but location isn’t specified, than the element occupies the spot it would occupy with static position. In other words in IE once I make position absolute I can set the left coordinate of the column to the width of the tree and with top of the column cell not specified it aligns itself with the row to which it belongs. Initially this is what happens in Mozilla also. However once a node is expanded the following nodes with their columns get pushed down. When the node is collapsed the following nodes return to the previous position, but not the column cells. I have an idea of setting position of the column to static and to absolute again in JavaScript when any node is collapsed, but I’m not sure if it will fix the problem. I will write more on any solution I find tomorrow, if I discover it.