3-state "expanded", "collapsed" and "semi-expanded" tree control

views:

answers:

+1 Q:

3-state "expanded", "collapsed" and "semi-expanded" tree control

What I'm trying to do is have a 3 state tree expansion.

I have three different icons for "expand" "collapse" "semi-expanded" which I want to use to show a partially populated tree control with all nodes initialized to semi-expanded state and then on clicking the "semi-expanded" icon it gets data from server and populates the tree and open that branch with "expanded" icon.

I tried looking for it but couldn't find anything close to it except the 3-state checkbox but don't know how to use it on 3 state icon when tree would only maintain 2 states.

Thanks in advance.

+1 A:

A 3-State tree control is a bit uncommon and might therefore be a bit confusing; consider that even simple 3-state checkboxes are relatively rare and users may not be accustomed to them. Maybe that's why you didn't find such a tree control.

Thus, maybe you should consider using an alternate design that doesn't require 3-state controls.

For example, the node could start in collapsed node. If the user expands it, and there is no data yet, show a single sub node with the text "retrieving data..." (and a progress wheel or other progress indicator, if you can) and start data retrieval. When the data arrives, replace this sub node with the actual data.

oefe 2010-08-23 18:51:46

Hi Oefe,Thanks for a quick response.I already use the alternate design as you've proposed.But I have two workflows:which is normal expansion/collapse of tree with nodes populated on-demand from server.the tree is initialized with a child node which is deep inside a hierarchy. For he second case I wish to show the partial hierarchy with a different "semi-expanded" icon with all parent folders thus prompting user to open completely only those folders for which the user wishes to get more data after which that particular folder stars following standard "expanded"/"collapsed" icons.

karora 2010-08-24 09:13:22

Why do you want to do this? Performance?Are you concerned about the load on the server, or about the response time on the client, or both?If server load is not an issue, you could still use the "retrieving data..." approach. Start with the tree showing only the nodes on the path to your initial node. Then retrieve the additional children for each ancestor node, either one by one, or in parallel.A possible drawback of that approach is that the tree changes frequently, which might be irritating.

oefe 2010-08-24 19:30:16

Hi Oefe, It's not because of performance or load on server. It's one of the workflows (please see workflow number 2 above) where I need to show a file in a directory tree (fetched from server). So to begin with, I've a file with it's folder paths which I would like to show as partially opened tree and then user should be able to open any of the branches on demand as normal workflow.

karora 2010-08-24 20:44:38

Why do you want this uncommon solution then? What is so important that it justifies a nonstandard behavior?

oefe 2010-08-26 20:25:57

Hi Oefe, I need this solution as I have a requirement from our designer to be able to show partial tree when the view is invoked for a leaf node for which directory hierarchy is known. This way we can present the tree with partial hierarchy straight away and then on demand expand intermediate nodes.

karora 2010-08-27 10:46:02

Hi Oefe,

Thanks for a quick response.

I already use the alternate design as you've proposed.

But I have two workflows:

which is normal expansion/collapse of tree with nodes populated on-demand from server.
the tree is initialized with a child node which is deep inside a hierarchy. For he second case I wish to show the partial hierarchy with a different "semi-expanded" icon with all parent folders thus prompting user to open completely only those folders for which the user wishes to get more data after which that particular folder stars following standard "expanded"/"collapsed" icons.

karora 2010-08-23 18:58:27

I think what you are looking for is called a lazy-loading tree. There are lots of examples your can google for, but here is a great example.

As far as the visual part of your request goes (3 different icons to show that state of the branch or node) - you could easily handle that with a custom renderer, by looking at a flag on the node for it's load status.

Does that help?

BigWorld 2010-08-23 20:46:25

Thanks BigWorld for pointing to a great explanation of lazy loading tree. I'm already doing it exactly like it for normal behavior. But this particular behavior of showing partial tree and still let user open an expanded tree has put me in loops. I tried working it out in item renderer but after a while get so confused :-(thanks for your time anyways.

karora 2010-08-24 09:12:58

I want to make sure I understand you correctly about a partial tree. Let's say that you have an open node with 2 items showing (even though it has 10 in the database) and by performing some action (say double clicking on the parent node) it loads in and displays the additional 8 children, correct?

BigWorld 2010-08-24 14:55:47

Yes it is correct that I want to show all nodes in expanded state with "semi-expanded (like a hollow triangle)" icon on each of it with only the folders which are part of the hierarchy (in workflow 2) and when user clicks (single-click as in expand the tree) the icon of any parent, the parent can fetch all sub-folders (only one level deep) and go to normal "expanded" state and that parent will start behaving normally then onwards.

karora 2010-08-24 18:52:00

@karora: Ok so remind me where you are at now - what is currently holding you up? It sounds like you can load in the data dynamically already, and you can already show the initial nodes, so now it's just a matter of detecting the event (say double click) and loading in the additional data. Right?

BigWorld 2010-08-28 13:23:50

ansaurus

tags:

views:

answers:

3-state "expanded", "collapsed" and "semi-expanded" tree control

related questions