Flex 3 DataGrid Tab Order

Question

I've been trying to get the tab order to work on this datagrid for some time now and I can't figure out what I am doing wrong. Can anyone spot it?

<?xml version="1.0" encoding="utf-8"?>
<controls:MDataGrid xmlns:mx="http://www.adobe.com/2006/mxml" 
                xmlns:controls="com.iwobanas.controls.*" 
                xmlns:dgc="com.iwobanas.controls.dataGridClasses.*"
                dataProvider="{locator.vendorInvoices}">

<mx:Script>
    <![CDATA[
        import com.model.PayablesLocator;

        [Bindable] private var locator:PayablesLocator = PayablesLocator.getInstance();
    ]]>
</mx:Script>

<controls:columns>

    <dgc:MDataGridColumn dataField="loadNumber" 
                         headerText="Load"/>

    <dgc:MDataGridColumn dataField="carrierName" 
                         headerText="Carrier"/>

    <mx:DataGridColumn dataField="vendorInvoiceNumber" 
                       headerText="Vendor Invoice #"
                       rendererIsEditor="true"
                       editorDataField="vendorInvoiceNumber">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">                        

                    <mx:Script>
                        <![CDATA[
                            protected function invoiceNumberInput_changeHandler(event:Event):void {
                                data.vendorInvoiceNumber = invoiceNumberInput.text;
                            }
                        ]]>
                    </mx:Script>

                    <mx:TextInput id="invoiceNumberInput"
                                  text="{data.vendorInvoiceNumber}"
                                  editable="true"
                                  width="95%"
                                  change="invoiceNumberInput_changeHandler(event)"/>
                </mx:HBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>

    <mx:DataGridColumn dataField="vendorInvoiceDate" 
                       headerText="Invoice Date"
                       rendererIsEditor="true"
                       editorDataField="vendorInvoiceDate">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">

                    <mx:Script>
                        <![CDATA[
                            import mx.controls.Alert;
                            import mx.events.CalendarLayoutChangeEvent;
                            import mx.events.CloseEvent;

                            protected function invoiceDateChanged(event:CalendarLayoutChangeEvent):void {
                                data.vendorInvoiceDate = event.newDate;
                            }
                        ]]>
                    </mx:Script>

                    <mx:DateField id="vendorInvoiceDateInput"
                                  selectedDate="{data.vendorInvoiceDate}"
                                  editable="true"
                                  width="95%"
                                  change="invoiceDateChanged(event)"/>                      
                </mx:HBox>

            </mx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>

    <mx:DataGridColumn dataField="isSelected"
                       headerText="Select" 
                       rendererIsEditor="true"
                       editorDataField="isSelected">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox horizontalAlign="center" verticalAlign="middle">                       

                    <mx:Script>
                        <![CDATA[
                            import com.controller.PayablesController;

                            private var control:PayablesController = PayablesController.getInstance();

                            private function onCheckboxClick():void {

                                data.isSelected = selectionCheckBox.selected;
                                control.updateBatchSelections();
                            }
                        ]]>
                    </mx:Script>    

                    <mx:CheckBox id="selectionCheckBox"
                                 selected="{data.isSelected}"
                                 change="onCheckboxClick()"/>
                </mx:HBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>

</controls:columns>

I'm trying to get the tab order as follows for each row: Vendor Invoice > Invoice Date > Select, but when I try to tab to the next field it jumps to the URL of the browser (IE in this case). I've tried a bunch of things found on the net, but none of them have seemed to work.

Any help would be greatly appreciated.

--Charly

Answer 1

There is no built in support for this. This will work if you have editable cells, and that too it will only work if your editors implement IFocusManagerComponent. (In this case your editors are wrapped inside HBoxes which do not). If you were using the spark datagrid, you could use : http://squaredi.blogspot.com/2011/09/precision-focus-control-within-spark.html

Answer 2

Resulting working code:

<?xml version="1.0" encoding="utf-8"?>
<controls:MDataGrid xmlns:mx="http://www.adobe.com/2006/mxml" 
                xmlns:controls="com.iwobanas.controls.*" 
                xmlns:dgc="com.iwobanas.controls.dataGridClasses.*"
                dataProvider="{locator.vendorInvoices}"
                editable="true">

<mx:Script>
    <![CDATA[
        import com.model.PayablesLocator;

        [Bindable] private var locator:PayablesLocator = PayablesLocator.getInstance();
    ]]>
</mx:Script>

<controls:columns>

    <dgc:MDataGridColumn dataField="loadNumber" 
                         headerText="Load"
                         editable="false"/>

    <dgc:MDataGridColumn dataField="carrierName" 
                         headerText="Carrier"
                         editable="false"/>

    <mx:DataGridColumn dataField="vendorInvoiceNumber" 
                       headerText="Vendor Invoice #"
                       rendererIsEditor="true"
                       editorDataField="value">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"
                         implements="mx.managers.IFocusManagerComponent">                       

                    <mx:Script>
                        <![CDATA[
                            [Bindable] public var value:String;

                            override public function drawFocus(draw:Boolean):void {
                                invoiceNumberInput.setFocus();
                            }
                        ]]>
                    </mx:Script>

                    <mx:TextInput id="invoiceNumberInput"
                                  text="{value}"
                                  width="95%"/>

                </mx:HBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>

    <mx:DataGridColumn dataField="vendorInvoiceDate" 
                       headerText="Invoice Date"
                       rendererIsEditor="true"
                       editorDataField="value">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"
                         implements="mx.managers.IFocusManagerComponent">                       

                    <mx:Script>
                        <![CDATA[
                            [Bindable] public var value:Date;

                            override public function drawFocus(draw:Boolean):void {
                                vendorInvoiceDateInput.setFocus();
                            }
                        ]]>
                    </mx:Script>

                    <mx:DateField id="vendorInvoiceDateInput"
                                  selectedDate="{value}"
                                  editable="true"
                                  width="95%"/>

                </mx:HBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>

    <mx:DataGridColumn editorDataField="isSelected"
                       headerText="Select"
                       rendererIsEditor="true">         
        <mx:itemRenderer>
            <mx:Component>

                <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"
                         implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComponent">

                    <mx:Script>
                        <![CDATA[
                            import com.controller.PayablesController;

                            import mx.controls.dataGridClasses.DataGridListData;
                            import mx.controls.listClasses.BaseListData;

                            private var control:PayablesController = PayablesController.getInstance();

                            private var _listData:DataGridListData;
                            [Bindable] public var isSelected:Boolean;

                            override public function drawFocus(draw:Boolean):void {
                                selectionCheckBox.setFocus();
                            }

                            override public function get data():Object {
                                return super.data;

                            }   

                            override public function set data(value:Object):void {
                                super.data = value;
                                selectionCheckBox.selected = data.isSelected
                            }

                            public function get listData():BaseListData {
                                return _listData;
                            }   

                            public function set listData(value:BaseListData):void {
                                _listData = DataGridListData(value);
                            }

                            protected function onChange(event:Event):void {
                                data.isSelected = selectionCheckBox.selected;
                                control.updateBatchSelections();
                            }                               
                        ]]>
                    </mx:Script>  

                    <mx:CheckBox id="selectionCheckBox" change="onChange(event)"/>

                </mx:HBox>

            </mx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>

</controls:columns>