How to tab vertically instead of horizontally - actionscript-3

Question

I am working in Flex and trying to get a sparks datagrid to tab vertically instead of horizontally.
var hBox:HBox = new HBox();
var templateDataGrid:spark.components.DataGrid = new spark.components.DataGrid();
templateDataGrid.dataProvider = dataGridList;
templateDataGrid.columns = columnHeaders;
templateDataGrid.sortableColumns = false;
templateDataGrid.editable = true;
hBox.addElement(templateDataGrid);
Have a pretty simple as3 implementation that I am rendering inside a HBox.
Here is a full working example from the API, I am writing my grid in as3 not mxml, but i can translate.
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Panel title="Spark DataGrid Control Example which demonstrates the variableRowHeight and rowHeight properties"
width="75%" height="75%"
horizontalCenter="0" verticalCenter="0">
<s:controlBarContent>
<s:HGroup verticalAlign="baseline">
<s:CheckBox label="variableRowHeight={dataGrid.variableRowHeight}" selected="#{dataGrid.variableRowHeight}"/>
<s:Label text=" "/> <!-- blank space -->
<s:HSlider minimum="12" maximum="120" value="#{dataGrid.grid.rowHeight}"/>
<s:Label text="rowHeight={dataGrid.grid.rowHeight}"/>
</s:HGroup>
</s:controlBarContent>
<s:DataGrid id="dataGrid" left="5" right="5" top="5" bottom="5" editable="true">
<s:ArrayCollection>
<s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
<s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
<s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
<s:DataItem key="1003" name="Drill" price="130.03" call="true"/>
<s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/>
<s:DataItem key="1005" name="File" price="150.05" call="true"/>
<s:DataItem key="1006" name="Gouge" price="160.06" call="false"/>
<s:DataItem key="1007" name="Hook" price="170.07" call="true"/>
<s:DataItem key="1008" name="Ink" price="180.08" call="false"/>
<s:DataItem key="1009" name="Jack" price="190.09" call="true"/>
</s:ArrayCollection>
</s:DataGrid>
</s:Panel>
</s:Application>
The grid example can be seen in the api here if you want to see the grid, and see than when you tab it goes horizontally. I want it to go vertically!

Answer 1

Here is what I have so far. It works in that when the person releases the tab key, it looks at where they are, and goes to a different location. (in my case down one.) The built in tab navigation happens on on KEY_DOWN, and this occurs on the KEY_UP. So the selected item bounces around which may not be the best. This works where for GridSelectionMode.SINGLE_CELL.
myGrid.addEventListener(KeyboardEvent.KEY_UP, selectionChangingHandler);
private function selectionChangingHandler(event:KeyboardEvent):void
{
if(event.keyCode == Keyboard.TAB){
var selectedCell:CellPosition = event.currentTarget.selectedCell;
var columnLength = event.currentTarget.grid.columns.length;
var rowLength = event.currentTarget.grid.dataProvider.length;
var columnIndex:Number = selectedCell.columnIndex;
var rowIndex:Number = selectedCell.rowIndex+1;
if(rowLength == rowIndex){
if(columnIndex == columnLength-1){
columnIndex = 0;
rowIndex = 0;
}else{
columnIndex = columnIndex+1;
rowIndex = 0;
}
}
var success:Boolean = event.currentTarget.startItemEditorSession(rowIndex,columnIndex);
event.currentTarget.setSelectedCell(rowIndex,columnIndex);
}
}