DataGrid Double-Click To Edit
Several people have asked about changing the default editing behavior of a DataGrid so that starting an edit session requires a double-click instead of the default single-click.
Here's my approach:
« Smooth Scrolling List | Main | Custom ILists, CheckBoxDataGrid, Merged Arrays »
Several people have asked about changing the default editing behavior of a DataGrid so that starting an edit session requires a double-click instead of the default single-click.
Here's my approach:
Comments
Seems to introduce a new bug...if you scroll with something being edited, the next attempts to edit a field selects the wrong field. (using 9,0,45,0 on Win)
---------------------------
Alex responds:
Thanks for catching that. I uploaded a fix for that.
I should also mention that this solution presumes that all renderers implement IDropInListItemRenderer.
Posted by: srouse | March 7, 2008 03:53 PM
Hey Alex,
I don't know why under my IE7 in Vista you last couple of blog posts with demos cannot be loaded. The SWF generate an invalid char javascript error of some sort.
I have to load it within Firefox to get it to work.
-Boub
Posted by: Boubalou | March 8, 2008 10:50 AM
I'm running Windows XP and use IE 7.0 but cannot view the swf files either. I too have to use Firefox.
---------------------
Alex responds:
Hmm, maybe I'll have to upload html wrappers as well.
Posted by: Jana | March 13, 2008 08:57 AM
I've implemented the same functionality, but in a different way. My class just simulates a single-click when a double-click occurs. That way it should still work even if the code for DataGrid is changed in the future.
public class DoubleClickDataGrid extends DataGrid {public function DoubleClickDataGrid() {
super();
doubleClickEnabled = true;
}
override protected function mouseDoubleClickHandler(event:MouseEvent):void {
super.mouseDoubleClickHandler(event);
// simulate a click (just calling the mouseUpHandler wont work)
super.mouseDownHandler(event);
super.mouseUpHandler(event);
}
override protected function mouseUpHandler(event:MouseEvent):void {
// prevent edits on normal mouse-up
var saved:Boolean = editable;
editable = false;
super.mouseUpHandler(event);
editable = saved;
}
}
Posted by: malone | March 22, 2008 07:05 AM
Hey,
Thanks so much for this, helped a lot!!!
p.s I used this on a Flex desktop app hooked up to a datagrid that is feed via xml
thanks,
abZ
(i think i may have this comment incorrectly on another post please disregard the other)
Posted by: abZ | March 28, 2008 05:01 PM
that is nice thing. How can I do it for tree control.
It does not have dataColumn.
Regards
Yasir
----------------------
Alex responds:
You should be able to replace that event with similar code from List.as like this:
var listEvent:ListEvent =
new ListEvent(ListEvent.ITEM_EDIT_BEGINNING, false, true);
// ITEM_EDIT events are cancelable
listEvent.rowIndex = rowIndex;
listEvent.columnIndex = 0;
dispatchEvent(listEvent);
Posted by: Yasir | April 3, 2008 12:58 AM
I am trying to make a tree that upon a particular drag and drop will immediately make the item that was just dropped to be an editor.
The idea is to have a tree where a "New Item" can be dragged into a particular place in the tree and once it is dropped, the user has the ability to name it. If the user decides not to name it, it should go away.
I have been trying for some time to make this to no avail. This post is the first thing that I have found that has been helpful. If anyone here has any additional info that might be useful for what I am doing I would appreciate it.
Thanks.
--------------------------
Alex responds:
I assume you saw this post as well? http://blogs.adobe.com/aharui/2008/03/custom_arraycollections_adding.html
Posted by: Jeff Peck | April 7, 2008 08:05 AM
Any suggestions on how to double-click on an unused list entry in order to insert a new item?
----------------------
Alex responds:
Start here: http://blogs.adobe.com/aharui/2008/03/custom_arraycollections_adding.html
Posted by: Mike Slinn | April 29, 2008 11:06 PM
I found some issue with this. I transofrmed it to work with List. Elements in the list can be deleted with key. After deletion, it starts editing at the newly selected item.
Do you have a solution for this?
----------------
Alex responds:
You didn't say where you want it to go. I'd probably put in some mode where you're in "newEntry" mode or not and when someone clicks delete switch out of newEntry mode and run the List normally.
Posted by: Ahmed ElDawy | May 13, 2008 05:22 AM
I use your DoubleClickDataGrid with an ItemEditor. The ItemEditor consists of 1 TextField and 2 Buttons (Cancel and Submit). And the DoubleClickDataGrid is in a Repeater.
Now my question: how can I control (cancel or submit) the ItemEditor with this 2 Buttons correctly?
At present, I use KeyboardEvents. That means when I click the Cancel-Button, I "dispach" the KeyCode 27 to the TextInput in the ItemEditor (and the KeyCode 13 when Submit is clicked).
Is this good style? Because now I have some problems with your DoubleClickDataGrid - Component.
When I click the Cancel-Button in the current ItemEditor the edit will be canceled and the old value of this cell is in this cell (like you press the Esc Button on you Keyboard).
This works fine.
When I click my submit button, the old value will be replaced with the new one (like you press the ENTER Button). But now when I click (one time - not doubleclick) in a row of another or the same DoubleClickDataGrid in the Repeater the ItemEditor starts!?
This only happens when I use my submit-Button.
When I use my cancel-Button, ESC, ENTER or focusout with the mouse, this did not happened.
Any idea?
-----------
Alex responds:
I would try dispatching an itemEditEnd event with different DataGridEventReasons for submit and cancel
Posted by: Marcus Fritze | May 15, 2008 07:52 AM
This is really a good and very useful to me.
But i need to double click edit the tree control, even i have followed the same way which is there in List.as
But it is not working as expected.
Could you please help me out in getting the tree editable on double click
----------------------
Alex responds:
I don't have time right now. I'd ask for help on FlexCoders.
Posted by: pinto | June 2, 2008 11:03 PM