It's about the code 

Setting Focus In Flex DataGrid Custom ItemEditor

This example will illustrate a couple of solutions: 1, I will show you how to create a custom ItemEditor for a DataGridColumn, implement it into your DataGrid, and have it update your DataProvider with edited cell data; 2, I will show you how to allow the custom ItemEditor to receive focus from an event.

First, lets setup the DataGrid:

Main.mxml

<mx:DataGrid editable="true" id="myGrid" dataProvider="{myItems}"
	alternatingItemColors="[#FFFFFF, #CCCCCC]"
	keyDown="setScanUpcFocus(event)"
	itemEditEnd="processData(event)">
	<mx:columns>
		<mx:DataGridColumn headerText="Cost" dataField="average_cost"
			itemEditor="components.CostItemEditor"  />
	</mx:columns>
</mx:DataGrid>

Great, simple little DataGrid. Take note that the editable property of grid is set to true – so the ItemEditor will be editable, the itemEditEnd property defines a method to call on that event, passing the event to the method, and the DataGridColumn defines an itemEditor component.

The next bit of code to look at is the custom ItemEditor. Now, the reason I chose to use a custom ItemEditor here is because I needed to be able to restrict the user’s input into the TextInput control, as well as select all text already in the control. Any special functionality beyond basic text input into an editable grid cell will require the use of a custom ItemEditor.

CostItemEditor.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/mx" 
	focusEnabled="true" implements="mx.managers.IFocusManagerComponent"
	focusIn="setInsert(event)">
	
	<fx:Script>
		<![CDATA[
			import mx.managers.IFocusManagerComponent;
			private function setInsert(event:FocusEvent):void{
				costEditor.setFocus();
				costEditor.selectAll();
			}
				
		]]>
	</fx:Script>
	<s:TextInput id="costEditor" text="{data.average_cost}" restrict="0-9 ." />
</s:MXDataGridItemRenderer>

Custom ItemEditors need not be complex, as is this one which is an MXDataGridItemRenderer component. Here is the rundown on this component. The most important thing in this component, as related to being able to actually get focus into the TextInput, is the implementation of IFocusManagerComponent found in the head of the component. Following that is the focusIn event which calls the necessary event method which sets the focus and selects all the text in the TextInput. Note that the TextInput takes data.average_cost as the text binding, as passed to it from the DataGridColumn.

Now, back in Main.mxml, we need to write out the itemEditEnd event method as called by our DataGrid

Main.mxml (inside script block)

private function processData(event:DataGridEvent):void {
	// Check the reason for the event.
	if (event.reason == DataGridEventReason.CANCELLED){
		// Do not update cell.
		return;
	}  
	if(event.dataField == "average_cost"){
		// Disable copying data back to the control.
		event.preventDefault();
					
		// Get new cost from custom ItemEditor.
		myGrid.editedItemRenderer.data.average_cost = new Number(CostItemEditor(DataGrid(event.target).itemEditorInstance).costEditor.text);
		// Close the cell editor.
		myGrid.destroyItemEditor();
					
		// Notify the list control to update its display.
		myGrid.dataProvider.itemUpdated(event.itemRenderer.data);
	}
}

The primary purpose of this method is to check to see if the dataField being updated is the one we are looking for (we can add any number of else if blocks to catch additional dataFields from columns). If we have a match, then we call the preventDefault method of the event to stop the default event propagation, then we assign the value in custom ItemEditor TextInput control’s (has id of costEditor) text property, next we destroy the ItemEditor instance as we no longer need it in memory, and finally we notify the list control that its data has been updated.

The final thing that needs to be done, to accomplish what I promised to illustrate, is to get focus set into the custom ItemEditor on an event.

Any event will do, button click, keyboard event, creationComplete, whatever is appropriate for your situation. What is important is that you will need to call the setFocus method on the grid, if focus is not currently on it when your event is dispatched, and you will need to define the editedItemPosition of the grid.

Main.mxml (inside script block)

posGrid.setFocus();
posGrid.editedItemPosition = {rowIndex:0, columnIndex:0};

These two lines would end up in your event method where you need to define focus to the rowIndex and columnIndex of your DataGridColumn

And there you have it: HTH

Flex 3 ItemEditor Examples on LiveDocs