FilterableTwinColSelect

Flow
1

I’ve just published a new server-side add-on:
FilterableTwinColSelect

Basically, it works almost as core’s TwinColSelect component, except that you can filter either unselected or selected values. Also, I’ve added shortcut buttons for selecting/deselecting all selections. Check it out!

-Kim

2

Hi Kim,
Really like your selector - very cool!
I’m using a derived ‘base’ Theme, not reindeer et al, and the middle buttons are a bit too large for the area between the list boxes (about a typical margin’s worth gets cutoff on the buttons).
Looks like the CSS for the buttons might be tied to a Theme?
I don’t know if there’s way/or how to set a different Theme just for this component. Any ideas how to get the CSS looking right?
Thanks!
Peter

3

Hi Kim,
I managed to fix this by changing the initializeButtons() and createButton() methods.
Because they’re currently private, I had to re-create the source in an new class.
If these and maybe a few others were made protected, it would be easy to make things look good across any theme.

Here’s the changed methods:

[code]
protected Layout initalizeButtons() {
buttonLayout = new VerticalLayout();
buttonLayout.setMargin(false);
buttonLayout.setSpacing(false);
buttonLayout.setWidth(buttonLayoutWidth);

	initializeListeners();

	Button btnTo = createButton(">", addSelectedListener);
	buttonLayout.addComponent(btnTo);
	buttonLayout.setComponentAlignment(btnTo, Alignment.MIDDLE_CENTER);

	Button btnToAll = createButton(">>", addAllListener);
	buttonLayout.addComponent(btnToAll);
	buttonLayout.setComponentAlignment(btnToAll, Alignment.MIDDLE_CENTER);

	Button btnFrom = createButton("<<", removeAllListener);
	buttonLayout.addComponent(btnFrom);
	buttonLayout.setComponentAlignment(btnFrom, Alignment.MIDDLE_CENTER);

	Button btnFromAll = createButton("<", removeSelectedListener);
	buttonLayout.addComponent(btnFromAll);
	buttonLayout.setComponentAlignment(btnFromAll, Alignment.MIDDLE_CENTER);

	return buttonLayout;
}
protected Button createButton(String caption, ClickListener listener) {
	Button button = new Button(caption, listener);
	button.setStyleName("nopadding");
	button.setStyleName("fixed40");
	return button;
}

[/code]Could also help to have a protected getLayout() method for customizing the HorizontalLayout.

Thanks, hope this helps, and great work!
Peter

4

I just tried to use it, but have no success with set/get the values.

My basic problem is that it does not show the selected values in the right column when I do a setValue(…)
Replacing the component with the original TwinColSelect and it works as expected…

Looking at your code, it seems to be missing a setValue(…) method handling the two columns

5

Hi,

‘Looking at your code, it seems to be missing a setValue(…)’
This seems to be fixed in git, however the mvn package still has this issue.

PLEASE update the mvn package !

6

Hi,

I just found out, why selected values are not shown in the ‘selected’ ListSelect.

The container sources for the two ListSelects are setup in the ’ initContent()’ routine, which is called onAttach() (I suppose). This means, selecting items when the Component is not yet attached will have no effect…

I fixed it by putting the assignment of the Containers for the ListSelects into the constructor…

public FilterableTwinColSelect() {
unselectedContainer.addContainerProperty("caption", Object.class, null);
selectedContainer.addContainerProperty("caption", Object.class, null);
setValue(new HashSet<Object>(), false);

layout = new HorizontalLayout();
layout.setSizeFull();
setWidth("300px");
setHeight("200px");

// setup the containerdatasource here
unselected.setContainerDataSource(unselectedContainer);
selected.setContainerDataSource(selectedContainer);
}
7

removeAll and setValue don’t work

8
9

Thanks for the add-on it works well but I did notice one difference from the original TwinColSelect. When moving values from the unselected to the selected lists or from selected back to unselected the original TwinColSelect reorded the elements whereas the FilterableTwinColSelect just puts them at the bottom without reordering them. Is there a way to get the lists to resort?

10

removeAll and setValue don’t work.
maxbet