Questions: * What does the "lockbox" at the top of the middle column do?

Directory TwinColSelect
1

Questions:

  • What does the “lockbox” at the top of the middle column do? I can see that the trash icon deselects everything currently selected.
  • it would be extremely helpful to have range select (click row 2, then shift-click row 6 to select 2,3,4,5,6). Use case: select all of a large subset when the sort order is semantically meaningful.
  • It would be helpful to have a select all option. Use case: select all of one column or the other then deselect the few that aren’t desired.
  • replace the checkboxes with a row highlight or something? my users find the checks distracting.
2

What does the “lockbox” at the top of the middle column do? it would be extremely helpful to have range select

Actually the “lockbox” is the range selection enabler at the moment. Enabling shift + mouse click range selection would require major refacorization of the component.

It would be helpful to have a select all option.

There is move all option for both directions.

replace the checkboxes with a row highlight or something?

That is something that I need to study. I used the Vaadin 8 TwinColSelect as reference when I made this. So I naturally have replicated its problems as well.

I also discussed with one of our designers after I had released this component and he suggested some different UI concepts as well, that would make the interaction better. There is quite a lot alternatives how to make this kind of list builder component and many variants for its requirements. It is quite hard to fit them all to one component.

3

Michael Thome:
replace the checkboxes with a row highlight or something? my users find the checks distracting.

I made some styling changes. Try version 1.7.0.

4

Will do.

I know we’ve discussed our use case in the past, but in case someone else is interested, we use TwinColSelect in several situations where:

  1. there are hundreds of options
  2. the options names and sorts are semantically meaningful, so filtering is important.
  3. there are often several versions of options that are likely to be selected at the same time.

We’re certainly open to other UI metaphors - I’ve thought about using a hierarchical selection component, for instance, but the simple widgets are extremely awkward for choosing N of M options where N and M are relatively large sets.