Flex DataGrid: Click once to select, click twice to edit

In the application I’m working on there’s a datagrid which when the user selects a row we update the info on the side page. The catch was we also enabled editing in the datagrid. It was strange to click the row to see the details on the side and then immediately be in edit mode.

Initially we required that the user double-click a field to edit it. The solution was based on the comment provided by Jana in this post.

The concern was that a user may not realize that you needed to double-click to edit the field. In the code provided below the user can select a row by clicking it. If they then click a field in the selected row it will switch in to edit mode.

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
	
	<mx:Script>
		<!&#91;CDATA&#91;
			import mx.controls.listClasses.IListItemRenderer;
			import mx.events.ListEvent;
			
			private var _selectedRow:int = -1;
			private var _clickCount:uint;
			
			override protected function mouseUpHandler( event:MouseEvent ):void 
			{
				editable = (_clickCount == 2);
				
				super.mouseUpHandler( event );													
			}
			
			override protected function selectItem( item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean=true ):Boolean
			{
				var returnValue:Boolean = super.selectItem( item, shiftKey, ctrlKey, transition );
				
				if (selectedIndex == _selectedRow)
				{
					_clickCount = 2;
				}
				else
				{
					_selectedRow = selectedIndex;
					_clickCount = 1;
				}
				
				return returnValue;			
			}
			
		&#93;&#93;>
	</mx:Script>

</mx:DataGrid>

Hope you find this helpful,
Hillel