Missing API for "setValueIconDSField" in SelectItem

[Blama]

Hi Isomorphic,

I'm looking to archive basically the same as is done in http://www.smartclient.com/smartgwt/showcase/#styled_combobox_category , but with databinding. I want a SelectItem with flags next to the name.
My ID column is numerical, the flags are named like "de.png", "us.png", etc. which is data I have in the ISO_3166_1_ALPHA_2 column.

I'd code it like this, but one method is missing.

setOptionDataSource(countryDS);
setOptionOperationId("fetchDropdowndata");
setValueField(countryDS.getPrimaryKeyFieldName());
setDisplayField("SHORTNAME_DE");
setSortField("SHORTNAME_DE");
etDefaultToFirstOption(true);
setImageURLPrefix("flags/16/");
setImageURLSuffix(".png");
setValueIconDSField("ISO_3166_1_ALPHA_2"); //API missing

I don't think I can solve this easily with ValueIconMapper, and I'm not sure what actually does.
Is there an easy way to do this, or do I have to fetch the data myself from the DS, then build ID->Name and ID->Countrycode mappings and set them via setValueMap and setValueIcons?

Thank you & Best regards,
Blama

[Isomorphic]

Use pickListFields to set up a ListGridField that will render the icons.

[Blama]

Hi Isomorphic,

thank you very much. Short message, but GREAT help. It works like a charm.

Small follow up: My ComboBoxItem now looks like in the attachment. Flags are there for the dropdown, but not the selected item.

I tried it like this to show the icon for the selected entry:

setEditorValueFormatter(new FormItemValueFormatter() {
	@Override
	public String formatValue(Object value, Record record, DynamicForm form, FormItem item) {
		String filename = "flags/16/" + record.getAttribute("ISO_3166_1_ALPHA_2") + ".png";
		String img = "<img scr=\"" + filename + "\" alt=\"\" />";
		return img;
	}
});

but the result gets escaped.
Is this the correct way to start?

Thanks,
Blama

[Isomorphic]

To actually show an icon next to the field you do need to use the ValueIcon system.

[Blama]

Hi Isomorphic,

I have the feeling that the API ComboBoxItem.setValueIconField() did not exist when I started this thread in 2012.
It seems to be what I'm looking for, a DataSource-aware API for the ValueIcon System (basically the mentioned missing "setValueIconDSField("ISO_3166_1_ALPHA_2");".

Could you add an example using this API to the styled_combobox_category-sample?

I can't get it to work. Using the API, I only get the fieldname displayed, but no IMG-tag.
So I'm still with my own ListGridField version, which only displays the icon when the picklist is expanded, but not when an entry is selected.

Please note that I'm on 4.1p.

Thank you & Best regards,
Blama

[Isomorphic]

No, that API does not do what you're hoping for. Here are the docs:

For Databound formItems, this property determines which column valueIcons should show up in for this formItem's pickList.
If unset valueIcons show up in the displayField column if specified, otherwise the valueField column.
In most cases only the displayField or valueField will be visible. This property is typically only required if custom pickListFields have been specfied for this item.

[Blama]

Hi Isomorphic,

I just saw your latest blog post about user formula and remembered this old problem of mine that perhaps could be solved with it.

I'm looking for a way to display countryicon + countryname in a SelectItem. This works for the pickList itself, but not the displayField after selecting the value (see above).
Is this supposed to work if I use it in combination with a programmatically created ListGridField with setUserFormula(), that I set as displayField?

Also, thumbs up for the videos. Basically this is known from the showcase, but still it makes you think. Also they will be good for potential new customers in order to see the advanced featured of the framework.

Best regards
Blama

[Isomorphic]

UserFormula doesn't apply here. It's for deriving the value of a field from *other* fields, not from the field itself.

As far as what you want, you keep flipping back and forth between SelectItem and ComboBoxItem, it's hard to tell what you're asking.

With a SelectItem, you can add an icon to the value by just call setValueFormatter() with a custom formatter. Above, you attempted something like this, but it was for a ComboBoxItem and you tried to setEditorValueFormatter(). Both aspects of this are incorrect, as you cannot stick an <img> in the middle of the editable value; the user isn't editing HTML.