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 flexcoders@yahoogroups.com, Alex Harui <aha...@...> 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: flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] On
> Behalf Of philcruz
> Sent: Monday, June 15, 2009 11:47 PM
> To: flexcoders@yahoogroups.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
>
