Enhance Tree control to optionally provide lines

[dankurka]

Originally reported on Google Code with ID 543

GWT Release: 1.2.22

Detailed description:The Tree control should have the ability to be drawn
with or without lines, like the Java Swing Tree.

Workaround if you have one:too much work!

Links to the relevant GWT Developer Forum posts:

Reported by darrell.kooy@ca.com on 2006-12-21 19:29:27

[dankurka]

Yes. I also need this feature.

Reported by william.shao@sysnet.com.cn on 2006-12-23 09:09:20

[dankurka]

Reported by gwt.team.morrildl on 2006-12-27 18:58:14

• Status changed: Accepted
• Labels added: Type-Enhancement, Priority-Low
• Labels removed: Type-Defect, Priority-Medium

[dankurka]

Reported by gwt.team.morrildl on 2007-02-12 20:38:14

• Labels added: Category-UI

[dankurka]

Yea a need this too.

Workaround if you have one:
http://pavelgj.blogspot.com/2007/01/inside-gwt-experience-treetreeitem.html

Reported by mikozak+legacy@google.com on 2007-06-18 17:14:50

[dankurka]

I think this is an important customization feature for tree widget. Please enable
this natively within GWT core. I looked at the last work-around suggested, but it
does not work well and has cross-browser compatibility issues.

Joster

Reported by joster.john on 2007-07-16 04:32:39

[dankurka]

This issue has been open for a while. Any chances it will make it into GWT 1.4 final
release? Having the optionality to add lines to tree is very meaningful to understand
the data associated with the tree on a browser. Any tree with 10 or elements will
benefit from this, which is most common. 

Please comment, if this will make into GWT 1.4 final release?

Joster

Reported by joster.john on 2007-07-20 07:42:29

[dankurka]

Reported by gwt.team.sumit on 2007-07-25 17:27:12

• Labels added: Priority-Medium
• Labels removed: Priority-Low

[dankurka]

Thanks Sumit for elevating the priority of this item. I would like to add that this
feature should enable controlling:
  - if the line shown for tree is dotted 
  - if the line shown for tree is solid
  - color, thickness pattern for the line
  - or similar kind of controls 

Joster

Reported by joster.john on 2007-07-25 22:38:08

[dankurka]

We should consider this as part of either a "Phase 1" or "Phase 2" of making the
default GWT styles prettier.

Reported by bruce+personal@google.com on 2007-09-18 17:48:53

• Labels added: Priority-High
• Labels removed: Priority-Medium

[dankurka]

Bumping this to jgw to reassign. Rajeev has his hands full with other stuff.

Reported by bruce+personal@google.com on 2007-09-18 17:49:52

[dankurka]

Hey Guys- 

Is is possible to have fix for this issues rolled-into GWT 1.5? 

Joster

Reported by joster.john on 2007-09-22 15:42:00

[dankurka]

Hey Joel- 

Any chances this can be pulled in? Please update status of this ticket. 

Joster

Reported by vkrajan on 2007-10-04 15:10:12

[dankurka]

Unless someone has the time to figure out how to do this efficiently, I'm afraid I
can't devote resources to it right now. Not everyone wants these lines in their
trees. Large trees can already get slow enough to cause problems. And at first glance
it looks like these lines would create a *lot* of extra DOM elements when nested
deeply at all.

I'm not opposed in general to making this an option in the tree, of course, but it's
not obvious to me that this is a simple addition.

Reported by gwt.team.jgw on 2007-10-09 13:49:01

[dankurka]

I just posted my patch to this issue on my blog:
  http://pavelgj.blogspot.com/2007/10/nice-gwt-tree-part-2.html

Basically the idea is that TreeItem now exposes more CSS styles:
.gwt-TreeItemChildSpan -- is the block containing all child items (actually now it's
a div)
.gwt-TreeItemChildSpanLast -- the last child block of the parent item

.gwt-TreeItemTdImg -- the cell of the table containing the image
.gwt-TreeItemTdImgLast -- the last cell of the table of the parent item containing
the image

(and more)

So, by default the tree renders just as does now, but if you play with TreeImages and
CSS you can customize it pretty easily.

PS: it's not the final/cleanest version so please be gentle.

Reported by pavelgj on 2007-10-15 19:22:36

[dankurka]

This is the updated patch and usecase. Removed TreeLinedImages from gwt-user library.
The zip includes the patch, example source and runnable compiled version.

(the patch is against the 1.4.60 tag)

Reported by pavelgj on 2007-10-16 19:18:05

---

• Attachment: tree-patch-20071016.zip

[dankurka]

Sorry I've taken a long time to look at this. There are several issues I'd like to
have resolved before I'd be willing to commit to doing this.

- This patch doesn't keep the dotted lines 'in phase' with each-other (i.e. you end
up with single pixel gaps at random intervals), and I'm not sure if that's even
possible in the general case, because you'd have to ensure that each element is a
multiple of 2 in height.
- It doesn't deal very well with font-size changes. Again, I'm not sure how feasible
it is to do this in general.
- This may be resolvable, but in the current code, adding a TreeItem to a Tree is
O(N) in the number of items, because of the call to resetStylesRecursive().

The tree is already much slower (especially on IE) than we would like it to be, and
this has caused real issues for a number of users. Our profiling has shown that
element creation is what's killing us.

The best idea I've heard on making it faster is to actually use <ul> and <li>
elements with a couple of styling tricks. This should get rid of a number of
elements, but I'm not sure what that would do to this styling approach. But if the
issue came down to a question of "fast" or "with dotted lines", I'd push strongly for
the former.

Reported by gwt.team.jgw on 2007-11-29 15:38:47

[dankurka]

Thanks. I understand your comment about enabling attractiveness while keeping
performance with feasibility aspects of this change.

I would request that it is very attractive and meaningful to have dotted lines with
tree widget for various scenarios. It is possible to enable two variations of the widget:
TreeFast       -> your new implementation of <ul> and <li> elements for
a fast tree
TreeDottedLine -> updated existing tree widget to provide dotted line support

Having the flexibility and optionality for users is very beneficial.
Users can judge based on performance consideration and needs which one to choose. For
example, for short trees, TreeDottedLine might be just fine.

For example we have many different types of panels in the existing GWT
package, each suffices different needs.

What do you think of this approach?

Reported by joster.john on 2007-11-30 08:23:53

[dankurka]

I am very interested in this as well.  How does the gwt-ext project accomplish this?

http://gwt-ext.googlecode.com/svn/trunk/site/samples/Showcase/Showcase.html#editableTree

Reported by ttbsoftware on 2007-11-30 13:33:56

[dankurka]

Joel, I agree that there is a significant performance impact with my approach. Maybe
we should look at a bit more radical API change -- ExtJS like API.

In ExtJS the tree provides render() method and tree is not re-rendered automatically
when you add/remove nodes, you have to call render() once you're done updating the
tree model.

  Tree tree = new Tree();
  tree.addNode(...);
  tree.addNode(...);
  tree.addNode(...);
  tree.render();

  panel.add(tree);

  tree.addNode(...);
  tree.removeNode(...);
  tree.render();

I believe this approach is much faster and will allow to easily and efficiently
render dottet lines, either with CSS or any other approach.

Reported by pavelgj on 2007-11-30 16:27:00

[dankurka]

We need to continue to think hard about how to proceed with this as the GWT UI
library evolves.

Reported by bruce+personal@google.com on 2008-04-08 17:00:08

• Labels added: Milestone-Planned

[dankurka]

Reported by bruce+personal@google.com on 2008-10-21 22:00:59

• Labels removed: priority-high

[dankurka]

The new FastTree api should certainly be made to work with this before it migrated
into GWT, as it is the intended successor to Tree.

Reported by ecc%google.com@gtempaccount.com on 2009-01-05 15:51:15

[dankurka]

FastTree from Incubator project? Should it not be ready by now?

Reported by rocky303 on 2010-01-13 12:02:47

[dankurka]

Whether this defect is fixed in FastTree or do we have any other work around to get
the tree customized with or without connector lines ?

Thanks,
Jerome

Reported by jerome976 on 2010-11-16 22:29:05

[dankurka]

Reported by rjrjr@google.com on 2011-01-13 03:09:43

• Labels added: Type-Feature
• Labels removed: Type-Enhancement

[dankurka]

Reported by rjrjr@google.com on 2011-01-13 03:16:18

• Status changed: PatchesWelcome
• Labels removed: Milestone-Planned

[dankurka]

Any updates on this ? Issue is open for years without a solution.
Advise if there is a patch to be downloaded. Thanks

Reported by kalyan.bh on 2012-09-27 13:39:32

[dankurka]

Since the status of the issue is "PatchesWelcome" I guess that no work has been done
on this from the GWT team. 

Maybe this issue should be closed and effort redirected towards implementing this "lines"
in CellTree?

Reported by rocky303 on 2012-09-27 13:41:16

[dankurka]

see: https://groups.google.com/d/msg/Google-Web-Toolkit/15XXIsPI4Zc/AGm-vcBZQKUJ

Reported by dankurka@google.com on 2013-06-07 02:06:24

• Status changed: AssumedStale