Treeview loading on demand a large number of nodes at the same level
I am in a situation where I need to display a tree. However, some nodes have 35,000 child nodes (direct children!). This is, of course, a way to slow down in terms of usability.
I would prefer that the tree only load the nodes that are visible in the browser viewport.
Such trees exist for WinForms and C ++, does anyone know if such a tree exists for ASP.NET?
We are currently using Telerik Treeview , which is an excellent control but does not support the situation described.
additional questions
In terms of usability: how do you deal with trees like this. Displaying 35,000 nodes at one level is nice, but how do you find something in this tree? Are you paging in wood? or search box? or add additional levels?
a source to share
With these many nodes, even if you can find an efficient way to display them, it probably won't be very useful to your users. Imagine trying to loop through 35,000 nodes to find the node you're interested in! The same goes for paging. Did the user actually navigate to 3500 pages (assuming the page size is 10) to find their target? Probably not, and if they do, they probably won't be too happy. :)
Instead, with such large datasets, I find it best to provide some type of "Filter" user interface. Something that allows your user to "shape" the available data into a more manageable collection.
I'm not sure if you have the ability to filter (for example which fields you can filter), but I believe your best bet. Parameters for the user interface:
- Something like RadGrid for ASP.NET AJAX that can provide a built-in filter interface that allows users to quickly find values of interest.
- Using the client-side RadTreeView API and support for on-demand loading of nodes, you can create a text box that will filter the nodes in the tree as the user enters. You simply handle the TextBox onkeyup event and then fire a request to the web service to grab the nodes that match the filter criteria and replace the TreeView node collection with the result. This will make it much easier for users to find their target node.
Clearly there are other approaches as well, but hopefully this gives you some ideas.
The short answer is . For large datasets, I would use a combination of real-time filtering and web services to provide users with a more manageable set of results. For bootstrapping, I only loaded the first (let's say) 200 nodes to keep performance high.
Hope this helps! -Todd
a source to share
I know there are some jQuery tree controls. I do not know the name from my hands. ASP.NET tree management definitely doesn't support this as it is not AJAXifiable. For displaying 35000 nodes problem, I would page them like this.
node
|
-- Sub Node 1
|
-- ...
|
-- Sub Node n
|
-- more...
When you hover over or click on more, it will get more nodes. If you are showing 100 subnodes, I would load 200 and hide the other 100. So when you hover more over more, it appears intantaneous. And every time you bring more attention ... the next hidden 100 are loaded.
Also, it is now not that hard to create custom tree controls nowadays with all browsers up to the level, use <ul>
and <li>
nested to create nodes and nodes and then apply the appropriate style. <li>
can contain links in them if you want to make the whole click easier.
My two cents.
a source to share