Directory

← Back

TwinColSelect

TwinColSelect for Flow (Vaadin 24, 23.3.x and 14.x)

Author

Rating

Popularity

600+

This is a fully server side custom component demo. There are many ways to implement TwinColSelect or so called list builder component. This one is build using layouts and checkboxes. The serverside API is a bit mimicing the CheckBoxGroup component of the framework. There is some resemblance to old TwinColSelect component of Vaadin 8, but this one has many new features.

Supported features

  • Drag and drop selection,
  • Range selection (shift + click by mouse)
  • Adopts left to right / right to left direction based on ui.setDirection();
  • DataView API
  • Tooltip generator for items
  • Tooltips for the buttons, I18n object to provide tooltip texts
  • Rudimentary A11y features
  • Keyboard navigation (cursor up/down, space for checked, enter to select)
  • Vertical and buttonless theme variants

Sample code

        // Create a new TwinColSelect
        TwinColSelect<String> select = new TwinColSelect<>();
        select.setItems("One","Two","Three","Four","Five","Six","Seven","Eight","Nine","Ten");

        // Set comparator for sorting
        dp.setSortComparator((a, b) -> a.compareTo(b));

        // Use selecetion listener
        select.addSelectionListener(event -> {
            log.removeAll();
            log.addComponentAsFirst(new Span(("Value changed")));
            event.getValue().forEach(item -> log.addComponentAsFirst(new Span(item + " selected!")));
        });

       // Clear checkbox ticks, does not affect the value
       select.clearTicks(ColType.BOTH);

        // Set filtering to data provider
        TextField filterField = new TextField("Filter");
        filterField.addValueChangeListener(event -> {
        	dp.setFilter(item -> item.toUpperCase().startsWith(event.getValue().toUpperCase()));
        });
       // Reset value when filter is changed
       select.setFilterMode(FilterMode.RESETVALUE);

       // Use vertical variant
       select.addThemeVariants(TwinColSelectVariant.VERTICAL);

       // Use default English tooltips for buttons
       select.setI18n(TwinColSelectI18n.getDefault());

       // Set tooltip generator for items
       select.setTooltipGenerator(item -> "This is item " + item);

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.1.2

  • Small fix
Released
2023-11-29
Maturity
STABLE
License
Apache License 2.0

Compatibility

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

TwinColSelect - Vaadin Add-on Directory

TwinColSelect for Flow (Vaadin 24, 23.3.x and 14.x) TwinColSelect - Vaadin Add-on Directory
This is a fully server side custom component demo. There are many ways to implement TwinColSelect or so called list builder component. This one is build using layouts and checkboxes. The serverside API is a bit mimicing the CheckBoxGroup component of the framework. There is some resemblance to old TwinColSelect component of Vaadin 8, but this one has many new features. Supported features - Drag and drop selection, - Range selection (shift + click by mouse) - Adopts left to right / right to left direction based on ui.setDirection(); - DataView API - Tooltip generator for items - Tooltips for the buttons, I18n object to provide tooltip texts - Rudimentary A11y features - Keyboard navigation (cursor up/down, space for checked, enter to select) - Vertical and buttonless theme variants
Online