TreeComboBox

ComboBox like component with hierarchical data.

View larger

Close

This is hierarchical ComboBox type single select component. It currently works with in-memory data providers, i.e. TreeDataProvider, it supports filtering, but not adding new items on the fly.

Features

• Filtering (can be disabled, when text field only shows the selected value)
• Select only leafs mode
• Clear button can be disabled
• Prefix icon
• Complete field API (error message, helper text, tooltip, required indicator)

Sponsored development

Major pieces of development of this add-on has been sponsored by customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code

        DepartmentData departmentData = new DepartmentData();
        TreeComboBox<Department> treeComboBox = new TreeComboBox<>(
                Department::getName);

        treeComboBox.setItems(departmentData.getRootDepartments(),
                departmentData::getChildDepartments);

        treeComboBox.setLabel("Select one");

        treeComboBox.setWidth("350px");

        treeComboBox.addValueChangeListener(event -> {
            if (event.getValue() != null) {
                add(new Span(event.getValue().getName()));
            } else {
                Notification.show("No value");
            }
        });

        Checkbox leafsOnly = new Checkbox("Leafs Only");
        leafsOnly.addValueChangeListener(e -> {
            treeComboBox.setSelectOnlyLeafs(e.getValue());
        });

        treeComboBox.setIcon(VaadinIcon.INFO.create());
        treeComboBox.setClearButtonVisible(false);
        treeComboBox.setValue(departmentData
                .getChildDepartments(departmentData.getRootDepartments().get(0))
                .get(0));
        treeComboBox.setTooltipText("Tooltip");
        treeComboBox.setHelperText("Helper");
        treeComboBox.setPopupWidth("400px");

        add(treeComboBox, leafsOnly);

Links

• View on GitHub
• Edit

Compatibility