Yeah, something was off so I backed things out so tabbing worked then moved
forward again. I couldn't get things to work by faking tab events though. The
resolution for me was dispatching the ITEM_EDIT_END event first and then move
the cell (with callLater()). Here's the key down handler on the itemEditor. (I
no longer needed to have the key handler on the grid itself). Thanks.
-Phil
public function onKeyDown(event:KeyboardEvent):void
{
trace("TextInputEditor.onKeyDown");
var grid:com.graphpad.datagrid.DataGrid =
com.graphpad.datagrid.DataGrid(this.parent.parent);
switch(event.keyCode)
{
case(Keyboard.DOWN):
trace("textInputEditor.DOWN");
dispatchEvent(new
DataGridEvent(DataGridEvent.ITEM_EDIT_END,true, false,listData.columnIndex,
null,listData.rowIndex, mx.events.DataGridEventReason.NEW_ROW,null));
callLater(grid.moveTo, [row + 1 , col]);
break;
case(Keyboard.UP):
trace("textInputEditor.UP");
dispatchEvent(new
DataGridEvent(DataGridEvent.ITEM_EDIT_END,true, false,listData.columnIndex,
null,listData.rowIndex, mx.events.DataGridEventReason.NEW_ROW,null));
callLater(grid.moveTo, [row - 1 , col]);
break
case(Keyboard.LEFT):
trace("textInputEditor.LEFT");
dispatchEvent(new
DataGridEvent(DataGridEvent.ITEM_EDIT_END,true, false,listData.columnIndex,
null,listData.rowIndex, mx.events.DataGridEventReason.NEW_COLUMN,null));
callLater(grid.moveTo, [row , col - 1]);
break;
case(Keyboard.TAB):
if (event.shiftKey)
callLater(grid.moveTo, [row , col - 1]);
else
callLater(grid.moveTo, [row , col + 1]);
break;
case(Keyboard.RIGHT):
trace("textInputEditor.RIGHT");
dispatchEvent(new
DataGridEvent(DataGridEvent.ITEM_EDIT_END,true, false,listData.columnIndex,
null,listData.rowIndex, mx.events.DataGridEventReason.NEW_COLUMN,null));
callLater(grid.moveTo, [row, col + 1]);
break;
case(Keyboard.ENTER):
trace("textInputEditor.ENTER");
if (event.shiftKey)
callLater(grid.moveTo, [row - 1 , col]);
else
callLater(grid.moveTo, [row + 1 , col]);
break;
}
}
--- In [email protected], Alex Harui <aha...@...> wrote:
>
> TAB should work in a standard DG. If it isn't in your custom DG, something
> might be thrown off by your customization which is also making your solution
> more difficult. You might want to try faking tabs on a standard DG and
> compare.
>
> Alex Harui
> Flex SDK Developer
> Adobe Systems Inc.<http://www.adobe.com/>
> Blog: http://blogs.adobe.com/aharui
>
> From: [email protected] [mailto:[email protected]] On
> Behalf Of philcruz
> Sent: Tuesday, June 16, 2009 5:33 PM
> To: [email protected]
> Subject: [flexcoders] Re: using arrow keys to move around editable datagrid
>
>
>
>
>
> Thanks for the reply. The custom grid wasn't moving from cell to cell based
> on typing the tab key so I didn't think that simulated events would do the
> trick. I got it to work but I wonder if there is a cleaner way.
>
> The grid has a custom itemEditor that extends TextInput. The itemEditor has a
> listener for keydown that calls this function
>
> public function onKeyDown(event:KeyboardEvent):void
> {
> trace("TextInputEditor.onKeyDown");
> //trace("currentTarget:" + event.currentTarget.toString());
> var grid:com.graphpad.datagrid.DataGrid =
> com.graphpad.datagrid.DataGrid(this.parent.parent);
> switch(event.keyCode)
> {
> case(Keyboard.DOWN):
> trace("textInputEditor.DOWN");
> //trace("editedItemPosition:" +
> mx.utils.ObjectUtil.toString(grid.editedItemPosition));
> grid.editedItemPosition = { rowIndex:grid.editedItemPosition.rowIndex + 1,
> columnIndex:grid.editedItemPosition.columnIndex };
> break;
> case(Keyboard.UP):
> trace("textInputEditor.UP");
> grid.editedItemPosition = {
> rowIndex:Math.max(grid.editedItemPosition.rowIndex - 1,0),
> columnIndex:grid.editedItemPosition.columnIndex };
> break;
> case(Keyboard.LEFT):
> trace("textInputEditor.LEFT");
> grid.editedItemPosition = { rowIndex:grid.editedItemPosition.rowIndex,
> columnIndex:Math.max(grid.editedItemPosition.columnIndex -1,0) };
> break;
> case(Keyboard.RIGHT):
> trace("textInputEditor.RIGHT");
> grid.editedItemPosition = { rowIndex:grid.editedItemPosition.rowIndex,
> columnIndex:grid.editedItemPosition.columnIndex +1 };
> break;
> }
>
> Having this handler alone doesn't work (not sure why). Then in the custom
> grid, it also has a listener for keydown that calls
>
> private function onKeyDown(event:KeyboardEvent):void
> {
> trace("datagrid.onKeyDown");
> if (this.editedItemPosition != null)
> {
> switch(event.keyCode)
> {
> case(Keyboard.DOWN):
> trace("DOWN");
> callLater(moveTo, [this.editedItemPosition.rowIndex +
> 1,this.editedItemPosition.columnIndex ]);
> break;
> case(Keyboard.UP):
> trace("UP");
> callLater(moveTo, [this.editedItemPosition.rowIndex -
> 1,this.editedItemPosition.columnIndex ]);
> break;
> case(Keyboard.LEFT):
> trace("LEFT");
> callLater(moveTo, [this.editedItemPosition.rowIndex,
> this.editedItemPosition.columnIndex - 1 ]);
> break;
> case(Keyboard.RIGHT):
> trace("RIGHT");
> callLater(moveTo, [this.editedItemPosition.rowIndex,
> this.editedItemPosition.columnIndex +1 ]);
> break;
> }
> }
>
> and the moveTo function is
>
> private function moveTo(row:int, col:int):void
> {
> trace("moveTo...");
> this.editedItemPosition = { rowIndex:row, columnIndex:col };
> this.updateList();
> }
>
> This works but not sure why I have to set the editedItemPosition in both
> handlers. Is there a better approach?
>
> -Phil
>
> --- In [email protected]<mailto:flexcoders%40yahoogroups.com>, Alex
> Harui <aharui@> wrote:
> >
> > Maybe fake TAB/SHIFT-TAB/ENTER/SHIFT_ENTER events when you get arrow key
> > events. For TAB/SHIFT-TAB you'll need to dispatch KEY_FOCUS_CHANGE
> >
> > Alex Harui
> > Flex SDK Developer
> > Adobe Systems Inc.<http://www.adobe.com/>
> > Blog: http://blogs.adobe.com/aharui
> >
> > From: [email protected]<mailto:flexcoders%40yahoogroups.com>
> > [mailto:[email protected]<mailto:flexcoders%40yahoogroups.com>] On
> > Behalf Of philcruz
> > Sent: Monday, June 15, 2009 11:47 PM
> > To: [email protected]<mailto:flexcoders%40yahoogroups.com>
> > Subject: [flexcoders] using arrow keys to move around editable datagrid
> >
> >
> >
> >
> >
> > I'm having a problem implementing keyboard navigation with a custom
> > editable datagrid. I want to have it such that if you are editing a cell,
> > you can use the arrow keys to move around and edit other cells. Given a
> > simple grid I can capture the keydown and set the editedItemPosition.
> > However, the custom grid has a listener for ITEM_EDIT_END and the handler
> > for that event is
> >
> > private function handleEditEnd(event:DataGridEvent):void
> > {
> > trace("datagrid.handelEditEnd");
> > trace(event.reason.toString());
> >
> > if (event.reason == mx.events.DataGridEventReason.CANCELLED)
> > {
> > // Do not update cell.
> > return;
> > }
> > // get the new data from the editor
> > var newData:String =
> > mx.controls.TextInput(event.currentTarget.itemEditorInstance).text;
> > var row:int = event.rowIndex;
> > var col:int = event.columnIndex - 1;
> > trace("newData: " + newData);
> > event.preventDefault();
> > this.destroyItemEditor();
> > //try to update the data in the data provider
> > this.dataProvider[row].cells[col].data = newData;
> > this.dataProvider.itemUpdated(event.itemRenderer.data);
> >
> > }
> >
> > I got this by looking at the example in the livedocs for "Passing multiple
> > values back from an item editor"
> > [http://livedocs.adobe.com/flex/3/html/celleditor_8.html#247667] which
> > shows using event.preventDefault() and destroyItemEditor(). However, this
> > causes problems with getting the keyboard navigation to work. If I comment
> > out those lines, the keyboard navigation works but then the datagrid
> > doesn't update the dataProvider.
> >
> > Any ideas how to work around this?
> >
> > -Phil
> >
>
