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