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: flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] On Behalf Of philcruz Sent: Tuesday, June 16, 2009 5:33 PM To: flexcoders@yahoogroups.com 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 flexcoders@yahoogroups.com<mailto:flexcoders%40yahoogroups.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:flexcoders%40yahoogroups.com> > [mailto:flexcoders@yahoogroups.com<mailto:flexcoders%40yahoogroups.com>] On > Behalf Of philcruz > Sent: Monday, June 15, 2009 11:47 PM > To: flexcoders@yahoogroups.com<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 >
