How to add checkbox in tree control?

Vaadin 6 / 7 / 8 Framework UI
1

Hi All,

How to add a checkbox just before each tree node name. Is it possible with the current tree control implementation?

If yes any one can help me on this?

2

I don’t think it is directly possible in the current implementation.

However, this sounds like a
multiselect
 tree and maybe there is a way to visualize the widget this way using CSS?

Just an idea…

3

Interesting idea. You could probably style the tree by adding checkbox images as a background to the tree nodes. Effectively this would do exactly what you want.

If you try it out, please tell us how it went.

4

I tried adding buttons as tree leafs/nodes, but tree keep displaying “false” as text instead of showing the buttons. Any tricks or ideas to solve this?

Thanks
Raj

5

You can’t have components as tree nodes, just text. The “false” text is the toString() value of the Button components.

But as Sami and Joonas noted, you could style the textual tree nodes to
look like
 buttons.

6

Thanks Marko,

I do not see css examples in book-of-vaadin, can you send me an example if you have.

Thanks
Raj.

7

Maybe the
ComponentTree
 add-on could be useful? Although it might need some tweaking as it is at least marked as not supporting IE.

8

Hi
I could add checkbox in componentTree as you have said. But unfortunately that didnt serve my purpose as i have to even implement search on that tree.
my code looks like this
private Component createDummyComponent (String header) {

    CssLayout l = new CssLayout();
 
	CheckBox c= new CheckBox();
	c.setCaption(header);

    l.addComponent(c);

    return l;
}

so can anyone let me know how to achieve adding checkbox in an normal tree implementation only

Thanks a lot

9

You can style tree items with an ItemStyleGenerator.

Tree.ItemStyleGenerator itemStyleGenerator = new Tree.ItemStyleGenerator() {
    public String getStyle(Object itemId) {
        // Chapter title items do not contain a period
        if (!((String)itemId).contains("."))
            return "chaptertitle";
        return null;
    }
}; 
menu.setItemStyleGenerator(itemStyleGenerator);

Have two styles: one for unchecked check box and another for checked. Then style them in a theme with CSS with a rule that has background image of an unchecked and a checked box, respectively. You need to add some margin-left or padding-left to give space for the check box.

Something like:

.v-tree-node-caption-unchecked {
    background: background: url("img/checkbox-unchecked.png");
    padding-left: 30px;
}
.v-tree-node-caption-checked {
        background: background: url("img/checkboxnchecked.png");
        padding-left: 30px;
}
10

cannot find symbol
symbol: class ItemStyleGenerator
location: class com.vaadin.ui.Tree