flex datagrid custom tab behavior

Question

I have two datagrids and I want to override the behavior of the tab-key event, so that it goes to the next datagrid, when the cursor reaches the end of the first datagrid columns.

Any hints are appreciated!

Markus

Alex B. Alex B. · Accepted Answer · 2010-01-25T17:27:40

Markus, this is a somewhat functional demo that should get you on the right track:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var src:Array = [
                { a:1, b:2, c:3 },
                { a:1, b:2, c:3 },
                { a:1, b:2, c:3 }
                ];

            private function init() : void
            {
                this.systemManager.addEventListener( KeyboardEvent.KEY_DOWN, onKeyDown );
            }

            private function onKeyDown(e:KeyboardEvent) : void
            {
                trace (dg1.rowCount, dg1.columnCount);
                if (e.target.parent.parent.parent is DataGrid)
                    var dg:DataGrid = e.target.parent.parent.parent as DataGrid;
                    if (dg == dg1)  
                        if (dg.editedItemPosition.columnIndex == dg.columnCount - 1)
                            if (dg.editedItemPosition.rowIndex == (dg.rowCount / 2) - 1)                                
                                dg2.setFocus();                 
            }
        ]]>
    </mx:Script>
    <mx:VBox>           
    <mx:DataGrid id="dg1" dataProvider="{src}" tabEnabled="true" editable="true">
        <mx:columns>
            <mx:DataGridColumn headerText="A" dataField="a" />
            <mx:DataGridColumn headerText="B" dataField="b" />
            <mx:DataGridColumn headerText="C" dataField="c" />
        </mx:columns>
    </mx:DataGrid>
    <mx:TextInput text="dfalsdfasdf" />
    <mx:DataGrid id="dg2" dataProvider="{src}" tabEnabled="true" editable="true">
        <mx:columns>
            <mx:DataGridColumn headerText="A" dataField="a" />
            <mx:DataGridColumn headerText="B" dataField="b" />
            <mx:DataGridColumn headerText="C" dataField="c" />
        </mx:columns>
    </mx:DataGrid>
    </mx:VBox>
</mx:Application>

Essentially, this is two datagrids with a textfield in between them. If you were to tab naturally from the last editable cell of the first grid, it would go to the text field first, then another tab event would set focus to the second datagrid.

I said this was "somewhat" functional, as I can't seem to get an accurate DataGrid.rowCount (It should be 3, but for some reason reads 6). This is why there's a dg.rowCount / 2 check in there.

Hopefully this should help move you forwards though ;)

flex datagrid custom tab behavior

2 Answers