DataGrid With PopUp Editor

Some folks seem to be in need of an itemEditor in the DataGrid that can popup or float over the DataGrid. The DataGrid currently limits the editor to fit within its size and if you need more space than that, you’ll need to popup an editor.
It is tricky to do so because of a bug in DataGrid plus the complexities of focus handlng and how it is normally used to end the edit session.
Here’s a workaround for the bug and my take on how to create popup editors. Usual caveats apply.
Download Source
Run Example

19 Responses to DataGrid With PopUp Editor

  1. Chase says:

    Nice attempt but a bit buggy… clicking on any of the rows in the last column multiple times causes multiple editors to appear and eventually stop everything from working. The first two columns’ rows seem to work as expected though.
    —————————–
    Alex responds:
    OK, maybe I’ll find time to look into that.

  2. Josh says:

    Alex, what’s the bug in Datagrid you mentioned?
    —————————–
    Alex responds:
    The itemEditorFocusOutHandler should use owns() instead of contains()

  3. codecraig says:

    I have a DataGrid with three columns (type, kind, amount). The type and kind columns each have a ComboBox as an item editor. When a type is selected the data that is bound to the “kind” combobox changes (based on the type chosen). Imagine this is based on foods.

    var types:Array = [‘Fruit’, ‘Vegetables’];
    var kinds:Array = [];
    var fruits:Array = [‘Banana’, ‘Orange’, ‘Apple’];
    var vegetables:Array = [‘Corn’, ‘Broccoli’, ‘Green Beans’];

    The combobox editors look like:

    The event handler for the “types” combobox does this:

    private function onDataSourcesChange(e:ListEvent):void {
    var index:int = (e.target as ComboBox).selectedIndex;
    if (index == 0) {
    kinds = fruits;
    }
    else {
    kinds = vegetables;
    }
    }

    So this works however, when there are multiple rows in the DataGrid and you change the “Type” in one row, it changes the options in the comboboxes in the “kind” column in all of the other rows.
    Any suggestions on how to do this? I basically need each row to only know about its own state.
    ————————-
    Alex responds:
    If you read through the other item renderer articles you’ll see that I recommend that all state be stored in the dataprovider or in some sort of associated object. Renderers get recycled and won’t store their own UI state.

  4. tm says:

    Hello Alex,
    Thank you for this example. Did you “find time to look into that”? I mean that it’s not working.
    ———————–
    Alex responds:
    Nope, not yet.

  5. Hi Alex,
    I am trying to create a Datagrid where all cells on a row are editable at the same time. Something that looks like this:
    http://www.webfuel.pt/jsaleiro/editablerow.jpg
    I am stuck between creating a popup covering the row, or extending the Datagrid making it support several itemEditors per line. Both options are scary, but I definitely need to make a bet on one of them.
    Given your experience, what do you recommend?
    Thanks in advance.
    ————————
    Alex responds:
    One popup editor that floats over the row

  6. lisa says:

    For me personally to create a popup editor was problematic until I first came across the information about it at http://rapid4me.com and entered your post. I admire the way how easily you put the instructions here. Much appreciated. Thank you!

  7. Trevor Hodge says:

    In your demo the first time you click on a row in the 3rd column the popup appears and allows you to edit. After you hit the “x” to return to the datagrid, you can no long get the popup to re-appear. Has anyone else experienced this bug??

  8. Aaron says:

    Thanks for this example it is exactly what I was looking for. There is the possibility of multiple popups at once, but I fixed that by making the popup dialog modal.
    However, another bug I can’t seem to fix is that if I click directly into the cell and then type several lines of text, hitting tab will simply re-open the editor for the same cell. I can hit tab over and over and the editor just keeps coming back. Any thoughts? If I just tab through the whole grid I don’t have this problem, until I come to the last cell.

  9. Alex Harui says:

    Does my example have the same problem or is it because you are now using modal popups? As the popup goes away the focusManager and DataGrid will try to restore focus to the last editable cell. You may have to determine that sequence is happening because the popup is going away, catch that in the ITEM_EDIT_BEGINNING event and force editing to a new cell by setting editedItemPosition. You may also need Flex 3.5 as I think we fixed a missing ITEM_EDIT_BEGINNING event in that release.

  10. Robert says:

    When running your example, and doubleclicking on the third column to edit it i get an exception…

  11. I have created “editing cell with popup editor with ADG ” and also implement cell edit in double click instead of single click.
    I have written itemeditBeginning handler and written a condition where if data is Date type then use prevent default to stop event processing and show popup editor to edit the cell. If data is not Date type then itemeditBeginning goes with default behaviors(i.e. direct edit the cell).
    I have a problem when i close popup form then focus is going to lastEdited cell. some time it goes to first cell of the ADG(i.e. column[0]row[0]). Since editedItemPosition is readonly so i can not set it. How can i set focus to the cell which is double clicked or what is the solution of the problem.
    please let me know
    Thanks
    Sachin

  12. Gene says:

    Alex, would you please give me some idea about the following complex control?
    I want to build a complex control which can work both standalone and as drop-in itemrenderer/itemeditor, the control contains:
    1. a TextInput control, which is used to display record ID.
    2. a icon next to the TextInput control, when clicked, a dropdown control will be displayed. (just like DateField control with DateChooser)
    3. In the dropdown control(Opened), including the following compoents:
    3.1) a TextInput control, which acts as search condition input,
    3.2) on the right of the search condition TextInput control, is a button control, when clicked, perform query operation to obtain records.
    3.3) immediate below the above 2 controls, is a DataGrid control which lists records obtained in 3.2.
    3.4) on the bottom right corner, there are two buttons: Ok and Cancel. When a record is selected in the datagrid and Ok button clicked, the record ID will be populated back into the TextInput control in 1.
    some hints or basic pseduo scripts are highly appreciated. I don’t know which control can be extended and which methods should be overrided. Thanks a lot.
    Gene

  13. Alex Harui says:

    Ask for help on the forums. That’s too much for me to handle on this blog. Or hire Adobe Consulting.

  14. Alex Harui says:

    editedItemPosition is not read-only. If you still have issues, try asking on the forums.

  15. Resolved, thanks for the help

  16. the record ID will be populated back into the TextInput control in 1.
    some hints or basic pseduo scripts are highly appreciated. I don’t know which control can be extended and which methods should be overrided. Thanks a lot.

  17. Link Juice says:

    Nice tips for datagrid.

  18. It’s good blog and thanks to give us useful info.thanks to share to us.