zero select in optionGroup

Vaadin 6 / 7 / 8 Framework UI
1

Hi all,

I have a question about the OptionGroup.

I used both setRequired(false); and setNullSelectionAllowed(true); to make an optionGroup where the user can select zero or one option(s).

However it seems that once a selection is made the user can never ‘unselect’ all options.

Is this intentionally or do I need a different initialization?

Regards,
Joost

2

You have to set the OptionGroup to multi-select mode to support ‘unselecting’ all options. This will, however, change the radio buttons into check-boxes, but it should behave the way you want.

3

Hi Jan,

True, this changes the radio buttons into CheckBoxes, but that will also allow multiple selections and not the one - zero selection I am looking for.

Actually I am using the OptionGroup in a table and I noticed that the ‘vertical OptionGroup’ is now changed in ‘horizontal CheckBoxes’.
One more side-effect …

Thanks for your answer, but I would still prefer a solution which also guarantees the one - zero selection.

Regards,
Joost

4

Sorry, I misunderstood your question. I think the best approach would be to implement your own custom field which would contain CheckBoxes, one for each item (option). Each CheckBox would have a listener which would unselect the other check-boxes. The
CustomField
 add-on is very handy for these situations and it’s server-side only! I use it all the time.

5

Hi Jan,

Perhaps an add-on is a bit of overkill?
It seems that I more or less could get the desired behaviour by adding the following listener:


		OptionGroup og = new OptionGroup("options", options);	// 
		og.setMultiSelect(true);							// hence horizontal checkboxes
			
//  no effect ...
//		og.setRequired(false);							// user can 'unselect'?
//		og.setNullSelectionAllowed(true);					// user can 'unselect'?
//		og.setNullSelectionItemId("none");					// user can 'unselect'?
			
	        og.select("default"); 								// select this by default
	        og.setImmediate(true);							// send the change to the server at once
	        
	        og.addListener(new Property.ValueChangeListener()
	    	{
	    		public void valueChange(ValueChangeEvent event) 
	    		{
	    			if (event.getProperty() == null || event.getProperty().getValue() == null )
	    			{
	    				// nothing to be done
	    			}
	    			else
	    			{
	    				OptionGroup o = (OptionGroup)event.getProperty();

	    				// get the set of options in 'click' order
	    				Set<Object> set = (Set<Object>)event.getProperty().getValue();
	    				if (set.size() > 1)
	    				{
	        				Object[] options = (Object[]
)set.toArray();
		    				o.setValue(null);		// deselect all options
		    				o.select(options[1]
);		// select last clicked option
	    				}
	    			}
	    		}
	    	});

Just missing ‘radio’ buttons, but acceptable for the moment.

Thanks for putting me on track,
Joost

6

Sure, it’s an overkill for a one-time use but could be useful for creating a reusable component. Anyway, glad you got it solved!

Jan