Move focus from one to another itemRenderer inside DataGrid itemRenderer

Question

I have a mx: DataGrid with 4 columns that have a itemRenderer with the following settings:

Mx:DataGrid:

<mx:DataGrid id="itensPedidoCompraList"
             width="100%"
             height="120"    
             dataProvider="{ model.pedidoCompra.itens }"
             editable="true"
             itemEditEnd="itensPedidoCompraList_itemEditEndHandler(event)">

Mx:DataGridColumn:

<mx:DataGridColumn headerText="{resourceManager.getString('cadastroPedidoCompra', 'ident.PercentualDesconto') }"
               width="60"
               textAlign="right"
               rendererIsEditor="true"
               editorDataField="data">
  <mx:itemRenderer>
             <fx:Component>
                   <mx:Canvas>
                         <input:NumberInput width="55"   number="@{data.percentualDesconto }"/>
                   </mx:Canvas>
        </fx:Component>
  </mx:itemRenderer>

The user clicks on the line of the grid and click on the column to edit. After him change or add value, ENTER key and have to move the focus to another column in the same line. The way I'm doing, is moving to the column below.

What is the best way to do to move to the right column?

Thank you

Sunil D. Sunil D. · Accepted Answer · 2012-08-17T16:51:54

Note that the DataGrid has the following functionality when editing rows:

Enter accepts the edit and moves focus to next row (if editorUsesEnterKey is true)
TAB or SHIFT-TAB accepts the edit and moves focus to next/previous column
ESC or CTRL-. cancels the edit leaving focus in place

You can disable the Enter key functionality with the editorUsesEnterKey property of the DataGridColumn.

<mx:DataGridColumn editorUsesEnterKey="false" />

Changing the behavior so that ENTER moves focus to right/left is a bit hairy. The key stroke handling is done in the private method below. This listener is added in the DataGrid's public method createItemEditor() and removed in destroyItemEditor(). Theoretically, you could override these methods to change this behavior.

Source mx::DataGrid (note tabbing is handled in a key focus change handler)

 private function editorKeyDownHandler(event:KeyboardEvent):void
    {
        // ESC just kills the editor, no new data
        if (event.keyCode == Keyboard.ESCAPE)
        {
            endEdit(DataGridEventReason.CANCELLED);
        }
        else if (event.ctrlKey && event.charCode == 46)
        {   // Check for Ctrl-.
            endEdit(DataGridEventReason.CANCELLED);
        }
        else if (event.charCode == Keyboard.ENTER && event.keyCode != 229)
        {
            // multiline editors can take the enter key.
            if (!_editedItemPosition)
                return;

            if (columns[_editedItemPosition.columnIndex].editorUsesEnterKey)
                return;

            // Enter edits the item, moves down a row
            // The 229 keyCode is for IME compatability. When entering an IME expression,
            // the enter key is down, but the keyCode is 229 instead of the enter key code.
            // Thanks to Yukari for this little trick...
            if (endEdit(DataGridEventReason.NEW_ROW) && !dontEdit)
                findNextEnterItemRenderer(event);
        }
    }

Move focus from one to another itemRenderer inside DataGrid itemRenderer

1 Answers