Tabbing through editable ListGrid cells

[jay.l.fisher]

I have a ListGrid with a canEditCell() method override specified. I also have the following attributes set.

grid.setEditOnFocus(true);
grid.setEnterKeyEditAction(EnterKeyEditAction.NEXTCELL);
grid.setRowEndEditAction(RowEndEditAction.NEXT);

If I click on a row, the first editable cell is opened for editing so I know my canEditCell() method is working correctly. However, there are a few issues I can't seem to resolve.

1) When I click on a row, the editable cells open for editing which is as expected, but the cursor is not positioned in the first one ready for editing. Pressing Tab once moves the cursor to the first editable cell. How can I do this without having to press Tab.

2) After editing the value in the first editable cell in the first row, Tab advances to the next column in the same record, even if it is not editable. I have to continue to Tab past all of the non-editable fields to advance to the next row. How can I have the cursor advance to the next editable field automatically (even when that is in the next row)?

3) I find that pressing Enter is effectively the same as Tab. It advances to the next field (editable or not). But after progressing past any non-editable cells in the current row, it advances to the next row and ALL cells are shown as editable in that row (except for those that have canEdit="false" at the datasource level). If I click on the next row instead of tabbing or Entering to get there, only the editable fields are opened for editing so I'm sure my canEditCell() logic is correct. But if I advance to the next row by pressing Enter or Tabbing past the remaining non-editable fields in the current row, all fields on the next row allow editing.

[Isomorphic]

Hi Jay,
Can you post your ListGrid definition so we can try to reproduce on our end?

Things are working as expected in this area for us so I think we'll need to see at least the canEditCell implementation.

Thanks
Isomorphic Software

[jay.l.fisher]

I've attached the code for the class that creates the grid and here is the code I'm using to test it.

public void onModuleLoad () {

	DataSourceField rowField = new DataSourceField("Color", FieldType.TEXT, "Color"); //$NON-NLS-1$
	DataSourceField colField = new DataSourceField("Size", FieldType.TEXT, "Size"); //$NON-NLS-1$
	DataSourceField cellField = new DataSourceField("Qty", FieldType.INTEGER, "Qty"); //$NON-NLS-1$
	DataSourceField colSortField = new DataSourceField("SizeSeq", FieldType.INTEGER, "Size Seq"); //$NON-NLS-1$
	Record[] recs = new Record[25];
	Integer r = 0;
	for (Integer c=1; c<4; c++) {
		for (Integer s=1; s<12; s++) {
			if ((c==1 && s>2 && s<10) || (c==2) || (c==3 && s>2 && s<10)) {
				Record rec = new Record();
				rec.setAttribute("Color", "Color "+c); //$NON-NLS-1$ //$NON-NLS-2$
				rec.setAttribute("Size", "Size "+s); //$NON-NLS-1$ //$NON-NLS-2$
				rec.setAttribute("Qty", (c*100)+s); //$NON-NLS-1$
				rec.setAttribute("SizeSeq", 12-s); //$NON-NLS-1$
				recs[r++]=rec;
			}
		}
	}
	HLayout mainLay = new HLayout();
	mainLay.setWidth100();
	mainLay.setHeight100();
	IpListGrid2D my2dGrid = new IpListGrid2D(recs,
			rowField, colField, cellField, colSortField);
	my2dGrid.setWidth100();
	my2dGrid.setHeight100();
	mainLay.addChild(my2dGrid);
	mainLay.draw();
}

I've tried logging all calls to canEditCell and it always returns the correct condition but the UI doesn't always reflect it. I can't seem to find a consistent way to recreate the situation. Sometimes it works and other times all cells are editable but I can't seem to find the combination of things that does it. I've also noticed that canEditCell is called multiple times for each cell when the row is selected; some cells twice, others 3 times. ??

[jay.l.fisher]

If you click on the first row in the grid, change the value in the first editable cell and tab to the next field you'll see problem #3 occur; all fields in that row switch to being editable.

Also, now that you can see what I'm trying to do (a simple variation on a pivot table) if there is another technique that I'm overlooking please point me in the right direction.

[Isomorphic]

Are you already aware of the CubeGrid? No Smart GWT wrapper yet, but you could sponsor it.

[Isomorphic]

Hi Jay,
Thanks for the sample code -- we were able to reproduce the problem. Our engineers are working on a fix for the issue in our code base.
In the meantime here's a patch which should resolve this issue for you:

Add this method to your IpListGrid2D.java class. It's a JSNI method which directly modifies a listGrid javascript object and works around the underlying problem:

	private native void patchGridCanEdit (JavaScriptObject grid) /*-{
	
		grid.sgwtcec = grid.canEditCell;
		grid.canEditCell = function (r,c) {
			var rv = this.sgwtcec(r,c);
                        // patch: the wrapper code may return an object which
                        // evaluates to false but doesn't behave the same as a true
                        // false boolean value in javascript
			if (rv == false) rv = false;
			return rv;
		}
	}-*/;

Then add this line to your source after the grid is created (for example before the 'addChild(...)' call):

patchGridCanEdit(grid.getOrCreateJsObj());

We should be getting a fix for this issue into the framework in the near future.

Thanks
Isomorphic Software

[jay.l.fisher]

Thanks! That seems to have taken care of it.

Regarding CubeGrid. I think it might be overkill for this use case, but I would be interested in knowing the cost to sponsor the SmartGWT wrapper for it. We have have other things on our roadmap where it would be very useful. You can contact me directly to discuss.

Thanks again.