Treeview with loading on demand large number of nodes on one level

Question

I'm in a situation where I need to display a tree. However some of the nodes have 35000 child nodes (direct childs!). This of course is way to slow in terms of usability.

I'd rather see that the tree loads only those nodes that are visible in the browser viewport.

Such trees exist for WinForms and C++, does any of you know if such a tree exist for ASP.NET?

We are currently using the Telerik Treeview, which is a lovely control, but does not support the situation described.

extra questions

From a usability point of view: how do you deal with such trees. Displaying 35000 nodes on one level is nice, but how do you find something in that tree? Do you use paging in a tree? or a search box? or maybe add extra levels?

Answer 1

I know there are some jQuery powered tree controls. Don't know the names off hand. The ASP.NET tree control definitely does not support this as it is not AJAXifiable. For the displaying 35000 nodes issue, I would page them like this.

node
|
-- Sub Node 1
|
-- ...
|
-- Sub Node n
|
-- more...

When you hover over more or click on it it will get more nodes. If you're displaying 100 sub nodes, I would load 200 and hide the other 100. This way when you hover over more, it appears intantaneous. And everytime you hover over more... the next hidden 100 are loaded.

Also, it's not that difficult to create a custom tree controls nowadays with all the uplevel browsers, use <ul> and <li> nested to create nodes and sub nodes and then apply the appropriate styling. The <li> can have links in them if you'd like to make the whole clicking easier.

My two cents.

Answer 2

With that many nodes, even if you can find a performant way to display them, it is likely not going to be very usable by your users. Imagine trying to scroll through 35,000 nodes just to find the node you're interested in! Same goes for paging. Is an user really going to page 3500 pages (assuming a page size of 10) to find their target? Probably not, and if they do, they probably won't be too happy. :)

Instead, with large data sets like this, I find it's usually best to provide some type of "Filter" UI. Something that enables your user to "shape" the available data in to a more manageable collection.

I'm not sure what ability you have to provide filtering (i.e. what fields you might filter on), but I think that's your best bet. Options for the UI are:

1. Something like RadGrid for ASP.NET AJAX that can provide a built-in filtering UI that enables users to quickly find the values they're interested in.
2. Using the RadTreeView's client-side API and support for loading nodes on-demand, you could create a textbox that would filter the nodes in the tree as the user types. You would simply handle the TextBox's onkeyup event and then fire a request to a web service to grab the nodes that meet the filter criteria, and replace your TreeView's node collection with the result. That will make it much easier for your users to find their target node.

Clearly there are other approaches, too, but hopefully this gives you some ideas.

Short Answer: For large datasets, I'd use a combination of real-time filtering and web services to present a more manageable result set to my users. For initial load, I'd only load the first (let's say) 200 nodes to keep performance high.

Hope this helps! -Todd