Custom ArrayCollections, Adding New Items to DataGrid

The previous posts used custom ILists to merge or concatenate other ILists. This example uses a custom subclass of ArrayCollection to fake an empty object at the end of the actual ArrayCollection which can be used to add new entries to the DataGrid.
If the user fills out the new entry, it is added to the actual collection and another new entry is faked. Additional logic dictates that if the user strips all information out of an entry, that entry is removed from the actual collection.
Usual caveats apply
Download Source
Run Demo

12 Responses to Custom ArrayCollections, Adding New Items to DataGrid

  1. Myo says:

    Hi Alex,
    First of all awesome posts from you and I am glad you find some time out of FlexCoder 🙂
    If I may make a suggestion, would you mind enabling the source instead of having separate link to download the code? You might have your own reason, but for those who are interested in checking out the code, they can do so easily without downloading and find the text editor to open up the files.
    Alex responds:
    Unfortunately, the blog software we use doesn’t allow multiple file or entire folder uploads making the posting of the view source too time consuming. I have limited time to cook up these posts and view source support would add a significant time cost. Sorry.

  2. nadh says:

    Hi Alex,
    Is there any idea to delete items from datagrid? and can we adding canvas to datagrid columns?
    Alex responds:
    To delete, you normally call removeItemAt on the dataprovider. You can add a Canvas as the renderer, but I discourage it for performance reasons. See the posts in the item renderer category for more details.

  3. Luke says:

    Nice application, only one bug:
    try to edit one name and then (with the row in edit mode) click to sort a column. It will result a double entry
    Alex responds:
    Usual caveats apply. Code on this blog is generally unsupported.

  4. Mareike says:

    I loved the little application and I found a way (may be not the best) to fix the bug. I added in the last line of the method ‘itemUpdated’ an refresh(). Now, it’s doining fine.

  5. Ed Syrett says:

    Hi Alex,
    Your test app seems to work fine for ArrayCollection. However, we use a lot of XML, and whilst we could feed in an XMLList as though it was an array, I thought I would have a go making it work with XMLListAdapter. I’ve created a small test app based on yours and posted it on my blog under the title “New line in DataGrid, using XML”. As mentioned in the post, I had to fix XMLListAdapter directly, and work around an issue in DataGrid. These issues obviously don’t arise in your version, so I suspect that’s what we’ll be using…:-)

  6. Maneesh says:

    On the last row, if you leave the First Name field empty and enter some text only in the Last Name field, pressing tab does not take you to the next row. The decision to add another row is made after the changes are committed in the ITEM_EDIT_END handler, and that seems to be the only way to do it. But I think by that time, the DataGrid has already decided where the focus is supposed to go next.
    In other words, the DataGrid is calculating the __proposedEditedItemPosition before dispatching the ITEM_EDIT_END event. I may be wrong, but the problem certainly exists. How to solve this?
    Alex responds:
    These examples are unsupported. You might want to ask on the forums. Someone might have already figured this out.

  7. Priya says:

    Can this idea be extended to add a summary row in the DataGrid which is not editable.

  8. Priya says:

    Alex,I have a requiremnet with 25 columns in the datagrid and flat XML data as my dataProvider.I was having issues with the footer datagrid approach (tried both your ideas ,extending the border/ adding the summary row as a child container ).

    Also,I was able to build on the top of your BetterDataGrid to get a good hscroll performance.Now,I want to weave the SummaryRow calculation into the plain datagrid.
    I was thinking of overriding the dataprovider in the DG to handle the IHierarchical View as well.Please advise on the right approach.

    Thanks for your time.

  9. Justin Daily says:

    Alex, please help. I don’t understand the following syntax in ‘NewEntryDataGridApp.mxml’ :

    (line 12) return { firstName: “”, lastName: “” };

    I am trying to create a standalone component based on this app, and I’m hoping that there’s a way to dynamically return these column names rather than having to specify them each time I use the dataGrid. But since I’m not familiar with the syntax, I can’t create a loop or anything. Thanks!

    • Alex Harui says:

      That is returning an object with two properties. It is equivalent to

      var foo:Object = new Object
      foo.firstName = “”;
      foo.lastName= “”;
      return foo;

      You can get column names via ObjectUtil.getClassInfo