Fog Creek Software
Discussion Board

Having a treeview in an HTML page

What are the technological alternatives if I want to implement a TreeView (Windows Explorer Like) in an HTML pages

Any snippet, URL to share ...


Wednesday, April 30, 2003

Check out dynamic drive for a DHTML solution:

Wednesday, April 30, 2003

Wednesday, April 30, 2003

Why on earth would you want to implement one of the most stupid user interface components ever known to man?

Tree views are only usable by people with acres (hectares?) of empty screen real-estate. On average monitors, with resolutions set by average users, they are about as useful as tits on a bull.

Wednesday, April 30, 2003

Indeed, you must be confused. Treeviews work *because* they conserve space.

You *are* aware you can collapse the branches, right?


Thursday, May 1, 2003

Treeviews may conserve vertical space, but not horizontal.

How many software products do you know which implement a tree view in a vertical pane?  Now, of those products, how many have a readable, usable view after any segment of the tree has been expanded?

Tree views usually result in massive truncation left and right, or squeeze the viewed information pane (ie, directory, file, etc.) into a less usable space.

I have yet to see a tree view which could not be more effectively implemented in some other manner.

Thursday, May 1, 2003

First of all, I like tree views and I think User like them too. I've implemented a few where appropriate and it seems to work really well.

I recently created a tree view for a project to display a data hierarchy with potentially billions of rows in. This was interesting as I obviously couldn't just grab all the data and parse it into the tree definition on the page.

Instead, it's built on the fly, as the User expands each node and destroyed when the node is collapsed. The performance is excellent, using SQL Server 2000 to source the data and ASP.NET with IE6 DHTML.

Steve Jones (UK)
Thursday, May 1, 2003

Thursday, May 1, 2003

The treeview is one of the least useful interfaces a user comes across, it forces the user to finger their way through data drilling down manually.

It makes looking at data at different levels in the tree at the same time awkward. 

Unless the data is strictly heirachical (and no files in folders are not strictly heirachical they're just stuck in nested folders), the tree is not a visual representation of the structure of that data.

Treeviews don't make it possible to select (without a lot of work on the interface), a common class, attribute or property of the population of data throughout the tree.

It might be possible to rescue the treeview and make it useable but no one has managed it so far.

Simon Lucy
Thursday, May 1, 2003

Treeviews work great for developers and programmers because they seem so logical. Unfortunately, they tend to force the implementation model of the system on the users.

I remember trying one out on the users of a previous client a few years back and they absolutely hated it. They thought it was clunky and took far to long to locate the info they were looking for - typically while they would be on the phone with a customer. We ended up using a hybrid search/navigation system which was much easier for them.

UI Designer
Thursday, May 1, 2003

To the folks who are bashing the treeview:

How would YOU represent hierarchical information in an efficient and easy-to-understand fashion?

Thursday, May 1, 2003

Presenting hierachical information can be done in a range of ways, it depends on the kind of information.

The point is not to give the user a maze of twisty passages all alike.  A tree is only useful to give structure, not to look at individual leaves.  For that you need a search and selection UI.

The mistake is to think that because its organised as a tree that it should be navigated as a tree.

Simon Lucy
Thursday, May 1, 2003

Try here:

Dave G
Thursday, May 1, 2003

This thing:

is pretty sleek. And works in mozilla (unlike the other DHTML solution mentioned)! Cool stuff.
Maybe browsers are not that bad as UI platform after all :)

Alexander Chalucov (
Thursday, May 1, 2003


Take a look at the MSDN site. Suppose you want to find info on, say, the 'setTimeout' DHTML method.

You go to

Assuming you know which branches to click on you expand 'Web Development' then expand 'HTML and Dynamic HTML' then expand 'SDK Documentation' then expand 'Reference' then expand 'Methods' and finally scroll down and click on 'setTimeout'.

You could also use their search function but then you have to scan the results to find the one relevant to what you want.

Or you could go to

and click on 'S' then click on 'setTimeout'.

Which do you think is easier to use?

Just because the data may be organized hierarchically doesn't mean it must be presented to the user that way.

UI Designer
Thursday, May 1, 2003

If you do some testing/user research, you'll see if your users take to this (advanced) form of menu navigation.

This is certainly not an exhaustive study, but it's worth a read:

Cascading versus Indexed Menu Design
"It is somewhat surprising that the task completion time differences were so great. That is to say, the results revealed a 6.4 second, average per-task time difference between the Index and the Horizontal conditions."

A cascading menu isn't exactly a tree menu, but it is a close cousin.


Thursday, May 1, 2003

If the primary use is to find leaves, then a tree sucks. If you need to show the hierarchical relationships and all node data is as important in the display as leaf data, then a tree is one good way to present it.

If you want the pick apples, you shouldn't have to climb the trunk and all the branches in the path to the fruit.

fool for python
Thursday, May 1, 2003

The point about apples is true, however you can see all the apples on the tree.

To pick a particular apple on a particular branch you have to know its there before you navigate, otherwise you will waste time.

Whilst its efficient for a software algorithm to process a tree, and its advantageous for an insect to wander an apple tree searching along branches in much the same way to find fruit it certainly isn't for people.

Cascaded menus are almost as bad, you have to know what is hidden in order to find it, or search incrementally.  The naming of menu options is fraught with interpretation and unless they travel the same path in an application over and over they will always hunt and peck for the right option and they will always curse whoever designed the menus.

Simon Lucy
Friday, May 2, 2003

If you know you hierarchy will never get deeper than 3 levels, you can use a combination of tabs and trees/menus. In one project I used an arguably complex combination of vertical tabs / horizontal tabs / two-level menu and the users loved it. Programming it was a lot harder than explaining the users how to use it...

Dario Vasconcelos
Saturday, May 3, 2003

I agree with the anti-tree-hugging-activists in this thread.

Tree views are semi intuitive for file folders in Windows, and infinitely nestable data, but less so for text bits and articles... Or at least on web pages. I always hate tree views on web pages. One problem is it's hard to give them meaningful names. Another is the implementation is inconsistent and you don't know whether you should click on the little + or the folder .gif or the word...

IMHO good web layout is intuitively heirarchical, often with an increasingly smaller top/left box style.

A long tabbed interface across the top can have a child leftnav, which can have a child top nav, and so on. Visually each child area is within the horizontal or vertical space of the parent, though usually once you get past the left nav, the navigation becomes embedded in the final layer layout.

This gives, typically, up to 4 levels of navigation... top tabs, then a possible horizontal nav below that (q.v., then a left nav below that, with a final level within the document itself.

Your location can also be represented several layers down within a tab by the infamous breadcrumb trail, using a shifting left nav to represent this.

I highly recommend Steve Krug's "Don't Make Me Think" book for usability.

That said, one of my favorite programs is - Treepad Free. It's a two paned organizer and I use it to keep notes on all sorts of things. It's one of the first programs I install any time I'm looking at a fresh version of Windows.
Saturday, May 3, 2003

back to the original question - there is/was also the original Joust outliner. I usually end up using an old version of Marcello's treeviewer because i modified it to have a focus on the selected node.

Saturday, May 3, 2003

I just visited Ivan Peters' website (joust). Clicking the + expands the node, but clicking the word doesn't open something to the right.

very nice, fast-loading code otherwise.
Sunday, May 4, 2003

*  Recent Topics

*  Fog Creek Home