TwinColSelect
TwinColSelect for Flow (Vaadin 24, 23.3.x and 14.x)
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
Compatibility
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 2.7.0
- Added API to control filtering when using sorting
- Released
- 2024-10-02
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 23
- Vaadin 21 in 2.0.0
- Vaadin 14 in 1.0.0
- Vaadin 24+ in 3.0.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)Online Demo
TwinColSelect version 1.0.0
### Version 1.0.0
- Initial release
TwinColSelect version 1.1.0
### Version 1.1.0
- Small fixes, added some JavaDocs added Drag and Drop support
- Vaadin 14.1 or newer required
TwinColSelect version 1.2.0
### Version 1.2.0
- Keep lists sorted if in memory DataProvider has Comparator set
TwinColSelect version 1.2.1
### Version 1.2.1
- Changed default value of the error message
TwinColSelect version 1.2.2
### Version 1.2.2
- Fixes broken setValue(..)
TwinColSelect version 1.2.3
### Version 1.2.3
- Fix broken clear()
TwinColSelect version 1.2.4
### Version 1.2.4
- Fixes deselect / deselectAll
- Clering now resets checkboxes too
TwinColSelect version 1.3.0
### Version 1.3.0
- Added clearTicks(..) and setClearTicksOnSelect(..)
TwinColSelect version 1.3.1
### Version 1.3.1
- Adding proper readOnly handling and styles
TwinColSelect version 1.4.0
### Version 1.4.0
- Added range selection option
TwinColSelect version 1.4.1
### Version 1.4.1
- Fixed the default constructor to use empty set as default value (see #4)
TwinColSelect version 1.5.0
### Version 1.5.0
- Added right to left support, requires Vaadin 14.3 or newer
TwinColSelect version 1.5.1
### Version 1.5.1
- Fixed issue with undefined direction
TwinColSelect version 1.6.0
### Version 1.6.0
- Add option to configure whether value is reset when filter is changed or not
- Fixed corner case bugs related to filtering and sorting
TwinColSelect version 1.7.0
### Version 1.7.0
- Made the items look less like conventional checkboxes
- Added API to customize button icons and captions
TwinColSelect version 1.8.0
### Version 1.8.0
- Improved range select & Double click to select, kudos to Michael Thorne for contributions
- Other small fixes
TwinColSelect version 1.8.1
### Version 1.8.1
- Fixed a typo in CSS that prevented add-on to work with Vaadin 14.6
TwinColSelect version 2.0.0
### Version 2.0.0
- Build against Vaadin 21
- Added support for DataView API
TwinColSelect version 2.1.0
### Version 2.1.0
- Fixed issue with buttons enabled when no data
- Fixed issue with Filter and SortComparator not working via DataView
- Fixed issue with sorting not done when moving items
- Compiled with Java 11 for Vaadin 23
TwinColSelect version 2.2.0
### Version 2.2.0
- Fix the required indicator to be similar to rest of the Vaadin components
TwinColSelect version 2.2.1
### Version 2.2.1
- Fix issue with buttons being disabled if the items were not initially set
- Fix issue with error message not appearing at right time
TwinColSelect version 2.2.2
### Version 2.2.2
- Made TwinColSelect preserve order of selection when there is no Comparator set. Note, MultiSelect interface uses Set as value, which is not promising preserving order. This feature is implementation detail.
TwinColSelect version 2.2.3
### Version 2.2.3
- Correct button states after setting readonly false
TwinColSelect version 2.3.0
### Version 2.3.0
- Add API's to set tooltips for items and buttons. Requires Vaadin 23.3.0.
TwinColSelect version 2.3.1
### Version 2.3.1
- Fix bugs with disabled checkbox behaviors
- Reset filter when programmatic selection is done
TwinColSelect version 2.4.0
### Version 2.4.0
- Improved A11y and keyboard navigation
- Added configurable PickMode
TwinColSelect version 2.5.0
### Version 2.5.0
- Added buttonless and vertical variants
- A11y improvements
TwinColSelect version 2.5.1
### Version 2.5.1
- Accessibility fixes: Error label, label and invalid status announced correctly. Moving to selected announced.
TwinColSelect version 2.5.2
### Version 2.5.2
- Fix issue with drag and drop clearing error color
TwinColSelect version 3.0.0
### Version 3.0.0
- Fix Vaadin 24 compatibility
TwinColSelect version 3.0.1
### Version 3.0.1
- Improve keyboard navi
- Use NativeLabel instead of Label
TwinColSelect version 1.9.0
### Version 1.9.0
- Backport recent improvements from Vaadin 23/24 versions
- Configurable pickmode
- Better A11y
- Theme variants (buttonless and vertical)
- Improved required indicator looks
- Tooltips
TwinColSelect version 3.1.0
### Version 3.1.0
- Major internal optimization by removing need to use Checkboxes by internal class SelectItem. This has some implications to styling as options are no longer Checkboxes.
TwinColSelect version 1.9.1
### Version 1.9.1
- Fix keyboard navigation and A11y
TwinColSelect version 2.6.0
### Version 2.6.0
- Optimize DOM, note this impacts styling, check demo app for styling: https://github.com/TatuLund/TwinColSelect/blob/nextlts/frontend/themes/mytheme/styles.css
- Fix container height CSS
TwinColSelect version 2.6.1
### Version 2.6.1
- Fix issue with item padding
TwinColSelect version 2.6.2
### Version 2.6.2
- Do not allow drag and drop from other TwinColSelect instances
TwinColSelect version 2.6.3
### Version 2.6.3
- Prevent drag and drop between TwinColSelect instances
TwinColSelect version 3.1.1
### Version 3.1.1
- Fix container height
- Fix item padding issue
- Prevent drag and drop between multiple TwinColSelect's
- Fix item tooltip being null
TwinColSelect version 3.1.2
### Version 3.1.2
- Small fix
TwinColSelect version 3.2.0
### Version 3.2.0
- Add API to control filtering when sorting to improve performance with bigger data sets
TwinColSelect version 2.7.0
### Version 2.7.0
- Added API to control filtering when using sorting