flex datagrid custom tab behavior

Question

Hello,

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

Answer 1

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 ;)

Answer 2

Hi Maximus,

I found the problem with the rowCount. The rowCount doesn't represent the amount of data in the grid, it represents the number of rows created... so if you look at the datagrid you see that each has 6 rows! thats why

To get the right amount of data I use dg.dataProvider.length...

Thanks again, it works now perfectly!

Markus