Useful: Double-Click to Edit a DataGrid Item

[Arodicus]

It seems to me that Adobe's click-to-edit Datagrid is dysfunctional: if you click any cell, you immediately jump into edit mode, and run the risk of screwing up your data when Mr. Pickles runs across your keyboard late at night.

Wouldn't it be nice to have click merely select the cell, and have double-click trigger the editor?

After much searching I realized most "examples" are either broken, outdated, or involve a complete rewrite of the DataGrid and/or ItemRenderers, which is overkill, imho.

Below is a much simpler method:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Script> 
        <![CDATA[
            import mx.events.DataGridEvent;
            import mx.events.ListEvent;
            private var dblClickEditMode:Boolean;
            
            [Bindable] private var dp:Array = [
                {Artist:"Pink Floyd", Price:"11.99", Album:"The Wall"},
                {Artist:"Pink Floyd", Price:"13.99", Album:"Animals"},
                {Artist:"Squeeze", Price:"12.99", Album:"Singles: 45's and Under"},
                {Artist:"Squeeze", Price:"10.99", Album:"Some Fantastic Place"},
                ]
            
            protected function dgGrid_itemClick(event:ListEvent):void {
                dblClickEditMode=false;
            }
            protected function dgGrid_itemDoubleClick(event:ListEvent):void {
                dblClickEditMode=true;
            }   
            protected function dgGrid_itemEditBegin(event:DataGridEvent):void {
                if(!dblClickEditMode) event.preventDefault();
            }
            
        ]]>
    </fx:Script> 
    
    <mx:DataGrid id="dgGrid"
                 editable="true"
                 doubleClickEnabled="true"
                 itemClick="dgGrid_itemClick(event)"
                 itemDoubleClick="dgGrid_itemDoubleClick(event)"
                 itemEditBegin="dgGrid_itemEditBegin(event)" 
                 dataProvider="{dp}">
        <mx:columns>
            <mx:DataGridColumn dataField="Album"/>
            <mx:DataGridColumn dataField="Price"/>
        </mx:columns>
    </mx:DataGrid>
</s:Application>

All I'm doing is trapping the "Open Editor" event and checking if it was immediately preceded by a double-click or single-click event. If it was a single-click event, I simply block it, preventing the editor from opening.

It seems to me this is a much better method than rewriting components, but I'm open to comments/suggestions...

[ASWC]

thx for sharing!

[drkstr]

An elegant solution indeed. Nice one!

Why not take it one step further and encapsulate that functionality in a custom component that extends DataGrid? This would make the solution much more reusable.

Well done and thanks for sharing.


Cheers!

[Peter Cowling]

Thanks, as has been said, a nice solution.

As Drkstr mentions, componentizing it would be good, but is something that anyone/most people can do for themselves. Adobe should be adding this behaviour to their to do list, IMO.

[Arodicus]

As requested, here is the DoubleClickDataGrid.mxml component as implemented in FlexBuilder/FlashBuilder 4 (spits at idiot marketing people).

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx"
             editable="true"
             doubleClickEnabled="true"
             itemClick="dgGrid_itemClick(event)"
             itemDoubleClick="dgGrid_itemDoubleClick(event)"
             itemEditBegin="dgGrid_itemEditBegin(event)">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <fx:Script> 
        <![CDATA[
            
            /**
             * Changes default behaviour of mx:DataGrid so that double-click edits a cell 
             * rather than a single-click.
             * 
             * */
            private var dblClickEditMode:Boolean;
            
            protected function dgGrid_itemClick(event:Event):void {
                dblClickEditMode=false;
            }
            protected function dgGrid_itemDoubleClick(event:Event):void {
                dblClickEditMode=true;
            }   
            protected function dgGrid_itemEditBegin(event:Event):void {
                if(!dblClickEditMode) event.preventDefault();
            }
            
            
        ]]>
    </fx:Script>
</mx:DataGrid>

[agnawt]

Thanks Arodicus, the code was really useful. Can't believe there is no property in the grid components that allows the default single-click to edit behavior be changed, its really annoying.