TwinColSelect

The TwinColSelect field provides a multiple selection component that shows two lists side by side, with the left column containing unselected items and the right column the selected items. The user can select items from the list on the left and click on the “>>” button to move them to the list on the right. Items can be deselected by selecting them in the right list and clicking on the “<<” button.

Twin Column Selection

The selection columns can have their own captions, separate from the overall component caption, which is managed by the containing layout. You can set the column captions with setLeftColumnCaption() and setRightColumnCaption().

Java

See the on-line example.

The setRows() method sets the height of the component by the number of visible items in the selection boxes. Setting the height with setHeight() to a defined value overrides the rows setting.

Common selection component features are described in .

CSS

  .v-select-twincol-options-caption {}
  .v-select-twincol-buttons {}
    .v-button {}
        .v-button-caption {}
    .v-select-twincol-deco {}