Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 07-28-2010, 10:30 PM   #1
Arodicus
Senior Member
 
Join Date: Nov 2002
Location: CA
Posts: 454
Cool Useful: Double-Click to Edit a DataGrid Item

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:

ActionScript Code:
<?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...
Arodicus is offline   Reply With Quote
Old 07-28-2010, 10:52 PM   #2
ASWC
Super Moderator
 
ASWC's Avatar
 
Join Date: Dec 2007
Location: Greenville, SC
Posts: 6,528
Default

thx for sharing!
__________________
aswebcreations
Super Duper!
ASWC is offline   Reply With Quote
Old 07-28-2010, 10:52 PM   #3
drkstr
Flexpert
 
drkstr's Avatar
 
Join Date: Sep 2006
Location: Seattle, WA: USA
Posts: 1,587
Default

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!
drkstr is offline   Reply With Quote
Old 07-30-2010, 12:11 PM   #4
Peter Cowling
quantum tunneler
 
Join Date: Sep 2008
Location: London, UK
Posts: 882
Default

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.
Peter Cowling is offline   Reply With Quote
Old 08-05-2010, 10:30 PM   #5
Arodicus
Senior Member
 
Join Date: Nov 2002
Location: CA
Posts: 454
Default DoubleClickDataGrid Component

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

ActionScript Code:
<?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>
Arodicus is offline   Reply With Quote
Old 11-22-2010, 12:34 AM   #6
agnawt
Registered User
 
Join Date: Nov 2010
Posts: 1
Default

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.
agnawt is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:51 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.