Multiple selectItem: enable the choice by click on the item itself

[addy_hu]

I use a multiple select item and set its multipleAppearance to PICKLIST. As the doc of MultipleAppearance.PICKLIST says, there will be "a drop-down picklist that allows multiple choices by clicking on a CHECKBOX next to each item". The problem is that I also want to enable the choice by click on the item itself (like a normal select item).
How can I achieve this? Thank you for any help.

[Isomorphic]

You could add a RecordClickHandler via setting pickListFields, and use setSelected(Record) to cause the record to be selected.

[addy_hu]

Thank you for the reply.
I add the RecordClickHandler, and inside it, I can enable the choice by calling setValues(); however there is no method to deselect the choice: I tried to remove it from the values and call setValues(), but it is still selected.

By the way, I don't find any method named: setSelected(Record) in SelectItem; Could you please clarify where it is?

[Isomorphic]

clearValue() or setValues() with an empty array will clear the selection, and setValues() with a subset of the current selected values will select just those values. If you're having trouble, please post code we can run to see the problem.

[Isomorphic]

Also, setSelected() is a method on ListGrid - the PickList is a subclass of ListGrid.

[addy_hu]

I found the real cause of the problem is that I used the option data source with multiple select item; after I changed to valueMap, the problem has been solved.

[cjustice]

I need to do this to make the picklist more easily clicked on an iPad. I don't follow the instructions you gave below.

You could add a RecordClickHandler via setting pickListFields, and use setSelected(Record) to cause the record to be selected.

I have a SelectItem whose values are set by a value map, and I'm not sure how to get to the underlying picklist or listgrid to do this.

My code looks like:

		final SelectItem layerItem = new SelectItem();
		layerItem.setTitle("Map Layers");
		layerItem.setMultiple(true);
		layerItem.setMultipleAppearance(MultipleAppearance.PICKLIST);
		layerItem.setWidth(150);
LinkedHashMap<String, String> valueMap = new LinkedHashMap<String, String>();
		for (ChartComponents cc : ChartComponents.values()) {
			valueMap.put(cc.name(), cc.toString());
			//formItems.add(cbItem);
		}
		layerItem.setValueMap(valueMap);

Thanks,
Chris

[Isomorphic]

A SelectItem with a valueMap creates its own fields for it's generated pickList, making the use of "setPickListFields()" for customizing the fields a little trickier than in the databound case.
However you should be able to customize the generated drop down PickList (a ListGrid instance) via setPickListProperties().

[cjustice]

I was able to get it working. Here is my implementation for anyone else who might need to do the same thing. Isomorphic, would you please look at this code and let me know if this is a reasonable implementation, or if there is a better way?

ListGrid pickListProperties = new ListGrid();
pickListProperties.addRecordClickHandler(new RecordClickHandler() {
	@Override
	public void onRecordClick(RecordClickEvent event) {
		Record record = event.getRecord();
		System.out.println("record: " + JSON.encode(record.getJsObj()));
		String clickedValue = record.getAttribute("mapLayers");
		List<String> selectedValuesList = new ArrayList<String>(Arrays.asList(layerItem.getValues()));
		if (selectedValuesList.contains(clickedValue))
		{
			selectedValuesList.remove(clickedValue);
		}
		else {
			selectedValuesList.add(clickedValue);
			
		}
		String updatedValues[] = new String[selectedValuesList.size()];
		selectedValuesList.toArray(updatedValues);
		
		layerItem.setValues( updatedValues);
	}
});
layerItem.setPickListProperties(pickListProperties);

[Isomorphic]

That looks like a pretty clean approach to us.

Regards
Isomorphic Software

[cjustice]

Thanks for the feedback! I think it would be a great addition to the SelectItem API to be able to turn this behavior on via a configuration property.