Recently I was trying to improve the usability of a Flex DataGrid for data entry purposes. What I wanted was that when I insert a new row into the grid, it would automatically give keyboard focus to the first cell in the new row.

I found that the editedItemPosition property allows you to specify the cell to edit by row and column indexes. However I found that modifying like so doesn’t do anything:

	grid.editedItemPosition.rowIndex=cities.length;
	grid.editedItemPosition.columnIndex= 0;

The reason that it doesn’t work is quite simply because the datagrid isn’t watching for changes to the rowIndex or columnIndex properties inside the editedItemPosition object. Also the editedItemPosition object isnt informing the DataGrid it has been modified. Instead, it is watching for changes to its own editedItemPosition property. In other words, you have to modify the editedItemPosition property for it to work. Here’s a example of the final result:

	<mx :Script>
		< ![CDATA[
			import vo.CityVO;
 
 
			public function startDataEntry() : void
			{
				cities.addItem(new CityVO());
				countryGrid.editedItemPosition = { rowIndex: cities.length - 1, columnIndex: 0 };
			}
		]]>
	</mx>
	<mx :ArrayCollection id="cities">
		<vo :CityVO city="Sydney" country="Australia" />
		<vo :CityVO city="New Delhi" country="India" />
		<vo :CityVO city="New York" country="United States of America" />
	</mx>
	<mx :Label text="Data Entry" />
	<mx :DataGrid id="countryGrid"
				 width="100%"
				 height="100%"
				 dataProvider="{cities}"
				 editable="true">
		</mx><mx :columns>
			<mx :DataGridColumn dataField="country" headerText="Country" />
			<mx :DataGridColumn dataField="city" headerText="city" />
		</mx>
 
	<mx :Button label="Add another" click="startDataEntry()" />

If you have any questions, fire them in the comments and I’ll get back to you asap