Tree: edit node possible?

Hi,

I wonder if its possible to set a node of a tree in “edit mode” so I can change its value inside the tree. If have searched around for a while, but cant find anything. Any help appreciated.

thx, klemensl

Here’s a small test application I wrote that does what you want:

public class TabletestApplication extends Application {

    @Override
    public void init() {
        Window mainWindow = new Window("Tabletest Application");
        final Table table = new Table();
        table.setWidth(100, Sizeable.UNITS_PERCENTAGE);
        table.setSelectable(true);
        // table.setMultiSelectMode(MultiSelectMode.DEFAULT);
        table.setMultiSelect(false);
        table.setNullSelectionAllowed(false);
        table.setImmediate(true);
        table.addContainerProperty("foo", Component.class, null);
        table.addContainerProperty("bar", Component.class, null);

        table.addListener(new ItemClickListener() {

            @Override
            public void itemClick(ItemClickEvent event) {
                Object itemId = event.getItemId();
                if (table.isSelected(itemId)) {
                    final Property containerProperty = table.getContainerProperty(itemId, event.getPropertyId());
                    Property property = (Property) containerProperty.getValue();
                    if (property instanceof Label) {
                        String propertyId = (String) event.getPropertyId();
                        final TextField field = new TextField();
                        field.setValue(property.getValue());
                        field.addListener(new BlurListener() {

                            @Override
                            public void blur(BlurEvent event) {
                                containerProperty.setValue(new Label("" + field.getValue()));
                            }
                        });
                        containerProperty.setValue(field);
                        field.focus();
                    }
                }
            }
        });

        for (int i = 0; i < 200; i++) {
            table.getContainerProperty(table.addItem(), "foo").setValue(new Label("" + i));
        }

        mainWindow.addComponent(table);
        setMainWindow(mainWindow);
    }
}

Cells in the FOO column are editable by first selecting a row and then clicking the cell, but the cells in the BAR column remain read-only. Text typed in the TextField is saved when the field loses focus, but note that pressing Enter does not cause this to happen. For that, you would have to add a ShortcutListener using TextField.addShortcutListener(…). That way, you could also cancel the edit when the user presses Escape, for example.

Thx Marlon, thats good for a table, but I would need the same behavior for a TREE (like the windows explorer F2 functionality). No one needed this before?

I’m sorry but I don’t think that the stock Tree supports components in any sense. Maybe
ComponentTree
could be something that you could use? It’s marked experimental and development hasn’t been directly active, but I’ve heard that it is a quite nice component.

I saw that component already in the addons section. Well if the standard tree does not support that functionality, i will probably try the ComponentTree.

Thx

The Vaadin
TreeTable
add-on is also worth of mentioning. With TreeTable, Marlon’s example would work.

How would that work with the TreeTable being populated from a BeanItemContainer?? I don’t have a field to hold a Component in my POJOs. I’ve tried it with a Generated Column, but the containerProperty is always null, so I can’t set the value to a TextField.


final Property containerProperty =
                       productsTable.getContainerProperty(itemId, event.getPropertyId());
 

:blink:

Cheers.

Setting a table into editable mode will try to do it’s best to give you components to edit the values. For example all Strings become TextFields and Dates becomes DateFields. You can modify the default logic TableFieldFactory.