ListGrid.RecordComponents - Issue

[ex70375]

hi isomorphic,

the next IE8 bug. (I hate IE :-))...

In IE8 there is a problem with "ShowRecordComponents". If you FILTER and SORT an listgrid the RecordComponents will (on some lines) disappear.

Expected result: every "male" record has a small icon at column MaritalStatus.

If you carry out these steps exactly, you will see the problem.

1) run my testclass.
2) choose employees Datascource
3) insert "full time" into field "Employee Type" inside boundForm and click "fetch"
4) sort listgrid by email (simply click at header)
5) now, important: please scroll using the small arrows in the List Grid down and you will see the problem. (please have a look at my screenshot). Not in each "male" line an image is displayed.

My Testclass:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.SelectionStyle;
import com.smartgwt.client.types.SortArrow;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.ImgButton;
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.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 saveBtn;
	private DetailViewer boundViewer;
	private IButton newBtn;

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

		Page.registerKey(debugKey, new PageKeyHandler() {
			@Override
			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() {
			@Override
			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(){
			@Override
			protected Canvas createRecordComponent(ListGridRecord record, Integer colNum) {

				String fieldName = this.getFieldName(colNum);
				if (fieldName.equals("MaritalStatus")) {
					String value = record.getAttribute("Gender");
					if ("male".equalsIgnoreCase(value)){
						HLayout recordCanvas = new HLayout();
						recordCanvas.setHeight(14);
						recordCanvas.setAlign(Alignment.CENTER);
						recordCanvas.setWidth(70);

						ImgButton editImg = new ImgButton();
						editImg.setShowDown(false);
						editImg.setShowRollOver(true);
						editImg.setSrc("[SKIN]/headerIcons/comment.png");
						editImg.setHoverWidth(150);
						editImg.setHeight(14);
						editImg.setWidth(16);
						editImg.addClickHandler(new ClickHandler() {
							@Override
							public void onClick(ClickEvent event) {
								System.out.println("click!!");
							}
						});
						recordCanvas.addMember(editImg);
						return recordCanvas;

					}
				}
				//				return null;
				return super.createRecordComponent(record, colNum);
			}
		};
		boundList.setHeight(200);
		boundList.setCanEdit(true);
		boundList.setShowRecordComponents(true);
		boundList.setShowRecordComponentsByCell(true);


		boundList.addRecordClickHandler(new RecordClickHandler() {
			@Override
			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);

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

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

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

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

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

		vStack.addMember(hLayout);


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

		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();
	}
}

best regards,
mirko

i used:
- Isomorphic SmartClient/SmartGWT Framework (v9.1p_2014-03-18/PowerEdition Deployment 2014-03-18)
- Internet Explorer 8

[Isomorphic]

We've made a change to address this - please retest with a nightly build dated March 20 or later.