Directory

← Back

TreeComboBox

ComboBox like component with hierarchical data.

Author

Rating

Popularity

300+

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)

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);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Version 3.2.0

  • Added setSelectOnlyLeafs, setClearButtonVisible, setIcon, setPopupWidth, setDisableFiltering
  • Implemented HasTooltip, HasValidation and HasHelper
  • Moved drop down open button to right
  • Bug fixes
  • Vaadin 24.2 or newer required
Released
2023-11-17
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 24+
Vaadin 14 in 1.0.0
Vaadin 23 in 2.0.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

TreeComboBox - Vaadin Add-on Directory

ComboBox like component with hierarchical data. TreeComboBox - Vaadin Add-on Directory
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](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)
Online