Directory

TwinColSelect

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

View larger

Close

View larger

Close

View larger

Close

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

Links

• View on GitHub
• Online Demo

Compatibility