Offline API, and grid.getViewState() is wrongly restored

[Sytematic]

Hello, using the 06-30-2011 Power nightly.
Browser: Firefox 5.0
OS: Mac OS X 10.6.8

I have an application with several listgrids. To all of those grids I want to add the offline view state capability.

The way the grids are initialized:

grid.setAlternateRecordStyles(true);
grid.setDataSource(dataSource);
grid.setAutoFetchData(false);
grid.setCanEdit(false);
grid.setModalEditing(true);
grid.setShowFilterEditor(true);
grid.setDoubleClickDelay(30);
grid.setListEndEditAction(RowEndEditAction.DONE);
grid.setCanRemoveRecords(false);
grid.setAutoSaveEdits(true);
grid.setShowRecordComponents(true);
grid.setShowRecordComponentsByCell(true);
grid.setCanExpandRecords(true);
grid.setFields(idField,	companyNameField, deleteField);
grid.hideField("Company_id");
	companyNameField = this.setFormatterForcompanyName(companyNameField);

companyNameField.setShowHover(false);

grid.addFieldStateChangedHandler(new FieldStateChangedHandler(){
	public void onFieldStateChanged(FieldStateChangedEvent event) {
		 String viewState = grid.getViewState();  
		 Offline.put("aGrid", viewState);  
	}
});

final String previouslySavedState = (String) Offline.get("aGrid");  
if (previouslySavedState != null) {  
    grid.addDrawHandler(new DrawHandler() {  
        public void onDraw(DrawEvent event) {  
            //restore any previously saved view state for this grid  
            grid.setViewState(previouslySavedState);  
        }  
    });  
}  

deleteField.setIcon(grid.getRemoveIcon());
deleteField.setType(ListGridFieldType.ICON);
deleteField.setTitle("");
deleteField.setWidth(24);
deleteField.setCanDragResize(false);
deleteField.setCanSort(false);
deleteField.setCanEdit(false);
deleteField.setCanGroupBy(false);
deleteField.setCanFreeze(false);
deleteField.setCanFilter(false);
deleteField.setCanHide(false);
deleteField.setCanReorder(false);
grid.addRecordClickHandler(new RecordClickHandler() {
	public void onRecordClick(RecordClickEvent event) {
		ListGridField clicked = event.getField();
		final Record r = event.getRecord();
		if ("deleteField".equals(clicked.getName())) {
			SC.confirm(radosMessages.delete_confirm(),
				new BooleanCallback() {
				public void execute(Boolean confirmed) {
					if (confirmed != null && confirmed) {
									grid.removeData(r);
					} else {
						//Cancel
					}
				}
			});
		}
	}
});

A few weird things happen:
1) Restoring the state happens incorrectly. It seems like all the fields are moved one spot.
2) Modifying one of the grids has the effect on ALL other grids. And yes, I do use a separate key for each grid!

See the attached screenshot for what is happening: here the columns are shifted one place to the right, and the expansion arrow is shown twice. (in other words: The word BP on the right column should be in the column in the middle)

Am I doing something wrong / should I initialize everything differently, or is this a bug?

[Isomorphic]

#2: We see that you've said your using different keys, but this isn't a plausible framework bug, look very hard to see how you might have colliding keys

#1: Your code isn't runnable as a test case and the samples are working properly. Please create a runnable test case.

[sjivan]

The offline grid preferences sample appears to be working fine.

[Sytematic]

100% positive on colliding keys, they were hardcoded.

I figured that it only happens when setCanExpandRecords(true). Then it is rendered as on the screenshot. I think the expansion stuff is wrongly restored.

A standalone testcase:

onModuleLoad file, called TechnicomMain.java:

package nl.sytematic.projects.Technicom.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.types.RowEndEditAction;
import com.smartgwt.client.util.BooleanCallback;
import com.smartgwt.client.util.Offline;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;
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.FieldStateChangedEvent;
import com.smartgwt.client.widgets.grid.events.FieldStateChangedHandler;
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.VLayout;

public class TechnicomMain extends VLayout implements EntryPoint {
	
	
	public void onModuleLoad() {
		TechnicomMain instance = new TechnicomMain();
		instance.show();
	}
	
	protected DataSource dataSource = DataSource.get("Project");

	ListGrid grid = new ListGrid() {

		@Override
		/**
		 * Makes sure that the colorpicker cell has the background of the actual value being picked. This looks nicer. (otherwise it would just show a colour code)
		 */
		protected String getCellCSSText(ListGridRecord record, int rowNum,
				int colNum) {
			final String fieldName = this.getFieldName(colNum);
			if (fieldName.equals("")) {
				String code = "#ffffff";

				if (record != null) {
					code = record.getAttributeAsString("");
				}

				return "background-color: " + code + "; color: " + code + ";";
			}
			return "";
		}

	/*	@Override
		protected Canvas getExpansionComponent(ListGridRecord rec) {
			ProjectModelReferencesView v = new ProjectModelReferencesView();
			return v;
		}*/

	};

	ListGridField idField = new ListGridField("Project_id", "Project_id");
	ListGridField deleteField = new ListGridField("deleteField", "-");

	ListGridField projectNumberField = new ListGridField("projectNumber",
			"projectNo");

	HLayout hLayout = new HLayout(15);
	public TechnicomMain(){
		setWidth100();
		setHeight(300);
		this.init();

	}

	public void init(){
		setAutoHeight();
		setWidth100();
		setHeight100();
		grid.setWidth100();
		grid.setHeight100();

		grid.setAlternateRecordStyles(true);
		// grid.setCellHeight(22);  
		grid.setDataSource(dataSource);
		grid.setAutoFetchData(true);
		grid.setCanEdit(false); //is switched on when userDetails are received, by the this#handleRights method  (iff rights are sufficient) 
		grid.setModalEditing(true);
		grid.setShowFilterEditor(true);
		grid.setDoubleClickDelay(30);

		grid.setListEndEditAction(RowEndEditAction.DONE);
		grid.setCanRemoveRecords(false); // we have our own delete button, with extra functionality   
		grid.setAutoSaveEdits(true);
		grid.setShowRecordComponents(true);
		grid.setShowRecordComponentsByCell(true);
		//grid.setRecordComponentHeight(22);

		//grid.setCanExpandRecords(true);

		projectNumberField.setShowHover(false);


		
		grid.addDrawHandler(new DrawHandler() {
			public void onDraw(DrawEvent event) {
				final String previouslySavedStateProjectRichTableView = (String) Offline
						.get("ProjectRichTableView");
				//restore any previously saved view state for this grid  
				if (previouslySavedStateProjectRichTableView != null) {
					grid.setViewState(previouslySavedStateProjectRichTableView);
				}
			}
		});


		deleteField.setIcon(grid.getRemoveIcon());
		deleteField.setType(ListGridFieldType.ICON);
		deleteField.setTitle("");
		deleteField.setWidth(24);
		deleteField.setCanDragResize(false);
		deleteField.setCanSort(false);
		deleteField.setCanEdit(false);
		deleteField.setCanGroupBy(false);
		deleteField.setCanFreeze(false);
		deleteField.setCanFilter(false);
		deleteField.setCanHide(false);
		deleteField.setCanReorder(false);
		grid.addRecordClickHandler(new RecordClickHandler() {
			public void onRecordClick(RecordClickEvent event) {
				ListGridField clicked = event.getField();
				final Record r = event.getRecord();
				if ("deleteField".equals(clicked.getName())) {
					
					SC.confirm("sure to delete?",
							new BooleanCallback() {
								public void execute(Boolean confirmed) {
									if (confirmed != null && confirmed) {
										grid.removeData(r);
									} else {
										//Cancel
									}
								}
							});

				}
			}

		});

		grid.setFields(idField,

		projectNumberField

		, deleteField

		);

		grid.hideField("Project_id");


		addMember(grid);
		
		grid.addFieldStateChangedHandler(new FieldStateChangedHandler() {
			public void onFieldStateChanged(FieldStateChangedEvent event) {
				String viewState = grid.getViewState();
				Offline.put("ProjectRichTableView", viewState);
			}
		});
				
		
	}	
}

Project.ds.xml that is used for the fetch:

<?xml version="1.0" encoding="UTF-8"?>

<DataSource ID="Project" serverType="sql" tableName="Project"> 
  <fields> 
    <!-- Id, with primaryKey -->  
    <field name="Project_id" type="sequence" primaryKey="true"/>  
    <field name="projectNumber" type="text" required="false" length="128"> 
      <title>projectNumber</title>  
    </field>  
  </fields>  
  <operationBindings> 
  </operationBindings> 
</DataSource>

Mysql table code:

CREATE TABLE `Project` (
  `Project_id` int(11) NOT NULL auto_increment,
  `projectNumber` varchar(128) default NULL,
  PRIMARY KEY  (`Project_id`),
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

Maybe it 's caused by Firefox 5.0?

[Isomorphic]

Turned out it was a combination of showing the expansion field (canExpandRecords:true) and having a filterEditor showing. This has now been fixed internally (the fix will be present in the upcoming 2.5 release).

[Sytematic]

Thanks. Any idea when 2.5 is released? Is it soonish?


Keep up the good work, great product, this!