ComboBoxItem with custom Picklist escapes img-html for ListGridField of type IMAGE

[Blama]

Hello Isomorphic,

I'm using v9.1p_2014-11-05 and observed following behaviour in my application:
I have a DynamicForm displaying a country ComboBoxItem with flags + names. I'm not using the ValueIcon system, as this is not possible in my case (see this thread).

When I define the ds-field as escapeHtml=true like in the following:

<field name="ISO_3166_1_ALPHA_2" title="ISO_3166_1_ALPHA_2" length="2" type="text" [B]escapeHTML="true"[/B] />

the img-tag for the flag column gets escaped (see attached image).

I tried to recreate the case in BuiltInDS, but it is working there.
The observed behaviour in my app is not that bad for me as I have a workaround (escapeHtml=false as only change, possible because the user never edits the values).
If you have an idea what is causing the behaviour for me, any pointer is appreciated nevertheless.

This is the (working as expected) BuiltInDS-sample, as close as it gets to my real-world scenario:

animals.ds.xml:

<DataSource ID="animals" serverType="sql" tableName="animals" testFileName="animals.data.xml">
	<fields>
		<field name="commonName" title="Animal" type="text" />
		<field name="scientificName" title="Scientific Name" type="text" primaryKey="true" required="true" />
		<field name="lifeSpan" title="Life Span" type="integer" />
		<field name="status" title="Endangered Status" type="text">
			<valueMap>
				<value>Threatened</value>
				<value>Endangered</value>
				<value>Not Endangered</value>
				<value>Not currently listed</value>
				<value>May become threatened</value>
				<value>Protected</value>
			</valueMap>
		</field>
		<field name="diet" title="Diet" type="text" />
		<field name="information" title="Interesting Facts" type="text" length="1000" />
		[B]<field name="picture" title="Picture" type="text" length="100" escapeHtml="true" />[/B]
	</fields>
</DataSource>

BuiltInDS.java:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.DSRequest;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.ExportFormat;
import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.types.SelectionStyle;
import com.smartgwt.client.types.SortArrow;
import com.smartgwt.client.types.TextMatchStyle;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.ComboBoxItem;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.grid.events.RecordClickEvent;
import com.smartgwt.client.widgets.grid.events.RecordClickHandler;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VStack;
import com.smartgwt.client.widgets.viewer.DetailViewer;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class BuiltInDS implements EntryPoint {
	private ListGrid boundList;
	private DynamicForm boundForm;
	private IButton exportBtn;
	private IButton saveBtn;
	private DetailViewer boundViewer;
	private IButton newBtn;

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		KeyIdentifier debugKey = new KeyIdentifier();
		debugKey.setCtrlKey(true);
		debugKey.setKeyName("D");

		Page.registerKey(debugKey, new PageKeyHandler() {
			public void execute(String keyName) {
				SC.showConsole();
			}
		});

		ListGrid grid = new ListGrid();
		grid.setLeft(20);
		grid.setTop(75);
		grid.setWidth(130);
		grid.setLeaveScrollbarGap(false);
		grid.setShowSortArrow(SortArrow.NONE);
		grid.setCanSort(false);
		grid.setFields(new ListGridField("dsTitle", "Select a DataSource"));
		grid.setData(new ListGridRecord[] { new DSRecord("Animals", "animals"), new DSRecord("Office Supplies", "supplyItem"),
				new DSRecord("Employees", "employees") });
		grid.setSelectionType(SelectionStyle.SINGLE);
		grid.addRecordClickHandler(new RecordClickHandler() {
			public void onRecordClick(RecordClickEvent event) {
				DSRecord record = (DSRecord) event.getRecord();
				bindComponents(record.getDsName());
			}
		});

		grid.draw();

		VStack vStack = new VStack();
		vStack.setLeft(175);
		vStack.setTop(75);
		vStack.setWidth("70%");
		vStack.setMembersMargin(20);

		Label label = new Label();
		label.setContents("<ul>" + "<li>select a datasource from the list at left to bind to these components</li>"
				+ "<li>click a record in the grid to view and edit that record in the form</li>"
				+ "<li>click <b>New</b> to start editing a new record in the form</li>"
				+ "<li>click <b>Save</b> to save changes to a new or edited record in the form</li>"
				+ "<li>click <b>Clear</b> to clear all fields in the form</li>"
				+ "<li>click <b>Filter</b> to filter (substring match) the grid based on form values</li>"
				+ "<li>click <b>Fetch</b> to fetch records (exact match) for the grid based on form values</li>"
				+ "<li>double-click a record in the grid to edit inline (press Return, or arrow/tab to another record, to save)</li>" + "</ul>");
		vStack.addMember(label);

		boundList = new ListGrid();
		boundList.setHeight(200);
		boundList.setCanEdit(true);
		boundList.setCanPickFields(true);

		boundList.addRecordClickHandler(new RecordClickHandler() {
			public void onRecordClick(RecordClickEvent event) {
				Record record = event.getRecord();
				boundForm.editRecord(record);
				saveBtn.enable();
				boundViewer.viewSelectedData(boundList);
			}
		});
		vStack.addMember(boundList);

		boundForm = new DynamicForm();
		boundForm.setNumCols(6);
		boundForm.setAutoFocus(false);
		vStack.addMember(boundForm);

		HLayout hLayout = new HLayout(10);
		hLayout.setMembersMargin(10);
		hLayout.setHeight(22);

		exportBtn = new IButton("Export");
		exportBtn.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				DSRequest exportReq = new DSRequest() {
					{
						setExportAs(ExportFormat.OOXML);
						setExportFilename("exportTest");
						setExportFields(new String[] { "commonName", "scientificName", "lifeSpan", "status", "diet", "information" });
					}
				};
				boundList.exportClientData(exportReq);
			}
		});

		saveBtn = new IButton("Save");
		saveBtn.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				boundForm.saveData();
				if (!boundForm.hasErrors()) {
					boundForm.clearValues();
					saveBtn.disable();
				}
			}
		});
		hLayout.addMembers(exportBtn, saveBtn);

		newBtn = new IButton("New");
		newBtn.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				boundForm.editNewRecord();
				saveBtn.enable();
			}
		});
		hLayout.addMember(newBtn);

		IButton clearBtn = new IButton("Clear");
		clearBtn.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				boundForm.clearValues();
				saveBtn.disable();
			}
		});
		hLayout.addMember(clearBtn);

		IButton filterBtn = new IButton("Filter");
		filterBtn.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				boundList.filterData(boundForm.getValuesAsCriteria());
				saveBtn.disable();
			}
		});
		hLayout.addMember(filterBtn);

		IButton fetchBtn = new IButton("Fetch");
		fetchBtn.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				boundList.fetchData(boundForm.getValuesAsCriteria());
				saveBtn.disable();
			}
		});
		hLayout.addMember(fetchBtn);

		vStack.addMember(hLayout);

		boundViewer = new DetailViewer();
		vStack.addMember(boundViewer);

		DynamicForm dftest = new DynamicForm() {
			{
				setDataSource(DataSource.get("animals"));
				ComboBoxItem animalCBI = new ComboBoxItemAnimal("scientificName");
				setFields(animalCBI);
			}
		};
		vStack.addMember(dftest);

		vStack.draw();
	}

	private void bindComponents(String dsName) {
		DataSource ds = DataSource.get(dsName);
		boundList.setDataSource(ds);
		boundViewer.setDataSource(ds);
		boundForm.setDataSource(ds);
		boundList.fetchData();
		newBtn.enable();
		saveBtn.disable();
	}

	public class ComboBoxItemAnimal extends ComboBoxItem {
		public ComboBoxItemAnimal(String name) {
			super(name);
			DataSource animalsDS = DataSource.get("animals");
			setOptionDataSource(animalsDS);
			setValueField(animalsDS.getPrimaryKeyFieldName());
			setFetchMissingValues(true);

			ListGridField commonNameLGF = new ListGridField("commonName");
			setDisplayField("commonName");
			setSortField("commonName");
			setDefaultValue("Allligator mississippiensis");
			setValidateOnExit(true);
			setDefaultToFirstOption(true);
			setTextMatchStyle(TextMatchStyle.SUBSTRING);
			setBrowserSpellCheck(false);
			// must be escapeHTML=false in ds.xml!
			// Or use ListGridFieldAnimalImage
			ListGridField animalImageLGF = new ListGridField("picture", "Picture", 25) {
				{
					setAlign(Alignment.CENTER);
					setType(ListGridFieldType.IMAGE);
					setImageURLPrefix("isomorphic/system/reference/inlineExamples/tiles/images/");
					setImageURLSuffix(".png");
				}
			};
			setPickListFields(animalImageLGF, commonNameLGF);
			setPickListHeaderHeight(0);
			setPickListWidth(200);
		}
	}

	public final class ListGridFieldAnimalImage extends ListGridField {
		public ListGridFieldAnimalImage(String name, String title, Integer width) {
			super(name, title, width);
			setAlign(Alignment.CENTER);
			setType(ListGridFieldType.IMAGE);
			setImageURLPrefix("isomorphic/system/reference/inlineExamples/tiles/images/");
			setImageURLSuffix(".png");
			setImageSize(16);
			setCanGroupBy(false);
			setCanSort(false);
		}
	}
}

This might be related to this bug, where also escapeHtml=true was causing the issue.

Best regards,
Blama

[Isomorphic]

We're not sure what to suggest here, beyond simplifying your real-world code to be closer to the sample until you see the problem disappear.

If your real-world code also sets ListGridFields for example, you might remove those.