How to disable Tree node expand/collapse functionality

General
1

Hello

How to disable Tree node’s expanding and/or collapsing for specific nodes?

-Timo

2

Any ideas?

-Timo

3

The trivial solution is to add a Tree.CollapseListener to the tree and when a collapse occurs, undo it.

tree.addListener(new Tree.CollapseListener() {
    public void nodeCollapse(CollapseEvent event) {
        // Re-expand the collapsed item
        tree.expandItem(event.getItemId());
    }
});
4

Or are you seeking for this
http://vaadin.com/api/com/vaadin/ui/Tree.html#setChildrenAllowed(java.lang.Object,%20boolean)
.

5

Thanks, but this trivial solution is not so good, because the UI is redrawn before the node expandings happens, which cause screen flickering.

6

Thanks, but I don’t think so.
In our tree, the first level tree node is a subject line, but it can have children nodes too. Subject line arrow is hidden and its expand/collapsing functionality should be disabled.

[i]
Subject node A

children 001
children 002

Subject node B

children 003

Subject node C

Subject node D

children 004
children 005

[/i]

And all this is in one tree.
I know, the tree should be separated into four different trees, but I’m just asking if this could be achieved by some tree trick. Probably we have to implement the separated trees anyway in the future.

7

This probably depends on how you hide the expand/collapse arrows.

I think that the clicks on the v-tree-node element cause expand/collapse, while clicks on v-tree-node-caption just cause selection.

The indentation seems to have been done with “.v-tree-node-caption {margin-left: 16px;}”. Perhaps if you change it to “padding-left”, the area will be considered to belong to the caption element, not the node element.

Perhaps you could also place some invisible layer over the expand buttons, but that’s probably too hacky.

A custom client-side widget is always the ultimate answer, and it shouldn’t even be very difficult in this case.

8

I am using a click handler to expand and collapse the tree. But the darn triangle icon still works because the expand collapse event is fired before the code reaches the Expand or Collapse handler. So no matter what i do I cannot stop the event from being fired.

Is there a way to just disable the “Triangle” that is reacting to the click for the expand and collapse??

9

It’s an ugly hack, but maybe you could use CSS to disable the pointer events on the triangle?

-Olli

10

I am very bad with CSS and Vaadin is a nightmare when it comes to Element inspection. I tried to locate the exact Css class but cannot seem to find where the click event is triggered from.

Can you help me with how to disable this with CSS as noted in your response?

Thanks

11

Try setting
pointer-events: none
 to
.v-tree-node:before
 . Hint for element inspecting: even if the element has context menu disabled, you can choose it in Chrome using the “Select an element in page to inspect it” from the mouse pointer -looking icon at the top left corner of the development tool panel (or use the shortcut Ctrl + Shift + C)

-Olli