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">
			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;
					_selectedRow = selectedIndex;
					_clickCount = 1;
				return returnValue;			


Hope you find this helpful,

Tags: ,

4 responses to “Flex DataGrid: Click once to select, click twice to edit”

  1. Miles says :

    Nice example. One adjustment I made was to initialise _selectedRow as:

    private var _selectedRow:uint = -1;

    Without this, _selectedRow is initialised as 0, and if the first row you click in the table is the first, the code thinks you’ve already clicked here once as _selectedRow = selectedIndex (also 0), hence goes straight into edit mode.

    • Hillel says :

      Excellent point, I actually just noticed this bug in the application I’m working on but hadn’t had a chance yet to track it down.

      Thanks very much,

    • Rob says :

      A uint can only be positive. Did you change the _selectedRow to be of the type int?

      • Hillel says :


        You’re absolutely right. It looks like I had fixed this in my code but hadn’t updated the blog post.

        Thanks for pointing it out, I’ve just updated the post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: