TreeTable scroll problem


I’ve been banging my head on getting TreeTable auto-scroll to work but it seems to constantly miscalculate the scroll position when child nodes are added dynamically during node expand. I managed to keep scroll position by wrapping my TreeTable inside Panel which to my understanding is the only component that allows you to programmatically manage scrolling (implements Scrollable). Now the problem is that when I expand some node in the tree, panel/tree content height is not updated and last nodes in the tree are hidden.

Is there any way disable auto-scrolling in TreeTable or get panel wrap solution to recalculate panel content and TreeTable height?

I have following setup with Vaadin 6.7.9:

  • TreeTable with depth of 2
  • Every node in TreeTable is a layout which all can have different heights
  • Child elements are added into TreeTable when their parent is expanded for the first time

TreeTable works by itself except when expanding the parent nodes for the first time (add new nodes into tree), auto-scroll moves you randomly somewhere in the tree and most of the cases you cannot even see the expanded node after auto-scroll.

I got rid of auto-scroll problems by wrapping the TreeTable inside Panel. So now when the component hierarchy is Panel → VerticalLayout (default content of Panel) → TreeTable. My next problem is that when nodes are expanded, VerticalLayout and TreeTable body heights are not updated and last nodes in the tree are hidden.

I partly resolved this problem in Firefox by setting:

.v-table-body {
position: absolute !important;

but this hides the whole tree in IE8 and in Firefox none of the tree nodes are hidden but when expanding the last tree node, scroll position cannot be restored using panel.setScrollTop() . Firefox also adds horizontal scrollbar when setting the style above.

If you have any suggestions on what should I try next, please answer. I’m out of tricks at the moment …

To be more precise, TreeTable default scrolling behavior scrolls to top everytime new items are added. In this demo example TreeTable also scrolls to top when items are added but after that previous scroll position is retained. In my TreeTable this doesn’t happen.

I use HierarchicalContainer which contains VerticalLayouts to be added into my TreeTable as items and scroll position is set to top on every item insert. I’ve also tried to add custom renderer with addGeneratedColumn() but behavior is the same.

I have to also mention that I had to disable paging and increase cache rate, because redering was so buggy (random extra space between items and at the end of tree and also disappearing of items when scrolling). These problems are probably a result of combination of bugs so I’m not sure what kind of tickets should I add about these problems I’m experiencing.

Has someone been able to successfully create a TreeTable that contains layouts (VerticalLayout etc.) and auto-scroll, paging and all work as a charm?

I came up with a solution that works in Firefox at least. I had to inject some JavaScript and give debug id for every tree item to make the TreeTable scrolling tolerable. This script does the trick:

function scrollToTreeTableNode() {
   var node = document.getElementById('div_id');
      window.setTimeout(scrollToInteractionNode, 2000);
    } else {

This script is executed after new items have been added into TreeTable. I also noticed that Window has method scrollIntoView(Component component) but since my TreeTable nodes do not return main window from getWindow(), this didn’t work either.

I also tried tricks mentioned by Henri here: but no luck with them.

Probably the ultimate solution for this problem would be that I could somehow save table scroll position via javascript before items are added and then restore scroll positions in another javascript after items are added into TreeTable. I’m not sure how to do it tough, so if someone has example about this, please share? :slight_smile:

I’m encountering exactly the same problem. I have tree table where each element might have different sizes (actually one of three sizes) due to use of custom components in the columns.

Let me explain several issues in several try outs :

  1. When I make everything full size (so layout and the table tree) Elements (or rows of) Treetable is squeezed so the components inside rows are not visible.
  2. When I make the layout’s size undefined and the TreeTable is full size then exactly the same problem appears (as Gaz described). Treetable’s scroll bar appears but last added items is not displayed (hidden or lost etc)
  3. When I start to use panel → vertical layout → treetable (in this case treetable is set to full size but its default content - vertical layout- is set to undefined height. All other combinations yields to problems 1 & 2) then it is ok and by the aid of panel’s scroll bar I can reach till the end of the treetable but after a while vertical scroll bar of Treetable also appears . That one creates a confusing user experience. Besides, a horizontal scroll bar is also appearing due to re-sizing that is triggered by vertical scroll bar appearance…

I would be really glad if somebody can give me some directions about this problem.

I’m also seeing this problem. I’d be happy if there was a way to just turn off all scroll bars on the treetable and let us manage the scrolling with a panel. My case does not involve large amounts of data so page size is set to 0 anyway. Frankly all I want is a tree that accepts components instead of strings anyway… I’ve CSS’ed the table headers away so if the scroll bars would just go away I’d be all set.

Unfortunately, given what I see in this post, I think I’m going to have to declare it a “not quite working hack” and re-build the UI using some other method.

Hi Everyone,

I am still having the problem of making the Tree Table Scrollable…I am able to see all the children when I press down arrow key…but that is not what I want…I tried putting the treetable into the panel…but that does not help!!

How can I make the Tree Table Scrollable? Please help!