Previous Discussion	Next Discussion

Tree + Lazy Loading + Endless Scrolling Has anybody ever seen such an AJAXed tree with BOTH "Lazy Loading" and "Endless Scrolling"? Any pointers to where you've seen it? Or at least, pull me out if you think I'm heading into a wrong direction. Thanks. Here's the situation. I may have a tree, having multiple roots, each of which may be N-level deep, with each branch possibly having N number of nodes and/or sub-branches. At the same level, branches show first, nodes show last. (How big? Well, mid-scale. Number of records may range from hundreds to tens of thousands) I could implement "Lazy Loading" whenever a branch is opened, like most lazy loading trees do. Yet, this branch may contain several tens of thousands of branches and/or tree nodes. This explains why I needed endless scrolling as well. You can imagine that this problem gets complicated when "Endless Scrolling" joins in. The key to basic endless scrolling is to always keep track of which last record is shown. For the tree's case, however, I at least need to keep track of one extra thing, i.e. whether I am endlessly scrolling branches or nodes. But still, "Endless Scrolling" has to support nodes located at any level deep. The presentation also gets complicated. Here's to visualize. Root 1      -- branch 1           -- N number of nodes           ...           ... (endless scrolling happening)           ... -- branch 2      -- branch 3 Root 1 is opened, all sub-branches 1, 2, 3 are loaded. You can imagine the problem after opening branch 1 with thousands of items in it: In theory I can't scroll down to branch 2 until I've loaded (or triggered) everything within branch 1. IMHO, not a good experience for the user either. I could perhaps detect how many "rows" there are under branch 1 when it gets opened, and first create the height needed. Maybe that's one way. I also welcome ideas of design alternatives, but the primary constraints are, no JavaScript frameworks used, it has to be in one tree, and these information has to go into the tree, I can't have a tree only containing branches where the nodes are loaded into a separate view. Started By Terry Young on Jul 24, 2009 at 1:21:07 AM This message has been edited.

5 Response(s) | Reply

Earlier Replies | Replies 2 to 5 of 5 | Later Replies

bod1467 on Jul 24, 2009 at 4:51:58 AM (# 2) Design thought - What about setting a max limit on the nodes (e.g. 50) for display, with an option to replace the current list of nodes with the next 50 onclick of a shape? That way you might limit what's retrieved in a one-hit, whilst also allowing the other branches to be easily accessible. Terry Young on Jul 26, 2009 at 6:40:36 PM (# 3) Yes, that is one of the practical options I am so tempted to use, yet I am also struggling so hard to avoid: A Web-1.0 "Prev/Next Page" user experience. The less clicks required the better (which was the point of endless scrolling) Perhaps it's possible that under every branch, I wrap all "nodes only" with a scrollable DIV (without scrollbars), and onmouseover-ing the "shape" it endelessly scrolls that inner DIV (not the whole tree), and onclick it could load ALL nodes under that branch. The main scrollbar would still scroll the entire tree as a whole. Terry Young on Jul 29, 2009 at 9:00:14 PM (# 4) This message has been edited. Well, I've made a decision. I now feel that "endleess scrolling" is more suitable for a flat structure, similar to Google Reader or bing.com's image search. I've decided that "endless scrolling" and a "tree structure" is too sophisticated to maintain, and I may not be the only person who would maintain the code in the future. I also believe this is one of the main reasons why we can't seem to find such a thing on the web. The only one close enough which I could find, was the dhtmlxTree. Do a search if anyone's interested. So I will just KISS the code (Keep It Simple, Stupid) branch - node 1 - .... - node 500 - [ more... ] Pretty much bod1467's idea. So, thank you, bod1467. If you click "more", than it's replaced by an AJAX-looking loading icon, and replaced again at the moment the next 500 records returns (appended with a new [more] button with new parameters if even more records are still detected). I'm not sure about sub-branches, so I'll load ALL sub-branches per tree-level anyway. Whoever organizes their tree in such a way where there are zillion folders in the same level (my tree can be modified by the user) would most probably be an idiot anyway. So the "more button" would only be for the tree leaves. bod1467 on Jul 30, 2009 at 1:26:54 AM (# 5) You're welcome Terry. It's nice to have a proper discussion thread here again, rather than all these shitty SPAM posts. :o) Ian.

Earlier Replies | Replies 2 to 5 of 5 | Later Replies

To respond to a discussion, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.