Spark List + Spark List = Spark DataGrid?

One of the goals of Spark is to use composition to create custom components. For Halo, everything was about performance and we hardwired a lot of custom subclasses together to get things to work as fast as possible. All of those custom subclasses made extending components very difficult at times.
One of the axioms of programming is that prototyping is usually much easier than creating something that is production-ready.
Most of you know that Flex 4.0 won’t have a Spark DataGrid. There just wasn’t enough time on the schedule. We created a Spark-based class called MXDataGridItemRenderer that allows you create item renderers for DataGrid using the same basic workflow as creating item renderers for Spark List. But the ways you customize the rest of DataGrid is different than the way you’d customize other Spark components.
I had some time recently to prototype a DataGrid-like thing by compositing two Spark Lists together. It took about a day or so to get this far. You can drag the headers to re-order them, resize the column widths, click on the headers to sort. And since it is composed of Spark pieces you can customize aspects of it like you would other Spark components.
Remember, this is a prototype. Not fully debugged or fully featured, and there is probably performance issues if you have lots of columns. I’m just posting it in case it inspires ideas for how you can create things in Spark that mimic things that exist in the MX components that are missing from Spark. For example, if you wanted to add a footer, it should be much more obvious that you can do that by adding a third List. If you wanted locked rows and columns, you’d probably just add more Lists.
Usual caveats apply. Also, there is absolutely no guarantee that when we finally produce a Spark DataGrid that it will be composed in the same way.

Run Demo
Download Source

11 Responses to Spark List + Spark List = Spark DataGrid?

  1. Thanks Alex, this is exactly what I was looking for!!
    What are you thoughts on a two column (typically 1500 rows) grid that only needs to sort (no column drag drop etc)… I’ll be using custom item renders for each column. I’m wondering which would have better overall performance, an mx:datagrid or two spark lists (one for header on for body) like you have hear?
    Of course, I probably should implement with both and use the profiler to get my answer, but I was just curious what thoughts you might have.
    Thanks again for the great post!!

  2. Alex Harui says:

    If you don’t need reordering or resizing columns, try a ButtonBar for the headers.

  3. I just installed the recently released Flash Builder 4 and came to the same disappointing conclusion you mention in this post: No Spark DataGrid.
    I understand the lack of time, but is there any ETA for a Spark DataGrid?
    I’m working on a multi-million dollar, client-facing, enterprise application using Flex Builder 3. And coming off of a prior Silverlight project, I found it disappointing that adding the simple concept of a fixed-row footer to the Flex DataGrid involved so much hackery. The one or two samples out there are very tedious and verbose. In Silverlight it’s easy, simple and elegant. When I heard Flash Builder 4 would be template-based (aka skins), I was excited that you were coming up-to-speed with Silverlight. However, upon further review, there seems to be a lot of controls which do not have template-able counterparts in Spark. I for one, would have waited a little longer for 100% parity with Halo. As it stand now, I am not compelled to upgrade from Flex Builder 3.

  4. Alex Harui says:

    Spark DataGrid is scheduled for the 4.5 release in 2011.

  5. Doug Mcleod says:

    Adobe is going to leave us without a style-able datagrid for an entire year?! I think it’s time for some to create a better framework…

  6. Jonathan says:

    In 2011 !?
    I think this next version and especially the datagrid control should be released ASAP cause your concurent Silverlight (and all component sellers around) are not waiting for you …
    I’m talking about Telerik’s Gridview, Component Art’s Datagrid, etc …

  7. Parth says:

    I think it is a boon to everyone that the DataGrid is not available. Personally I think it is overused to the point that it kills creativity. ItemRenderers and List (even in mx) allow for richer display of information. Why display a column of words like “OPEN” and “CLOSED” when you could communicate faster with a graphic?

  8. Gareth Arch says:

    There is a stylable DataGrid…it’s the mx:DataGrid which should still work perfectly fine for most uses. As Alex stated, there is some hackery with *some* styling, but you can still solve most issues without having to change it a whole lot.
    And looking at those 2 Silverlight components mentioned, there is nothing there in the demos that is not easily done via the basic datagrid + some itemrenderers. I’ve also created a component for paging an arraycollection and made it freely available at

  9. Shawn says:

    Ugg.. did this really have to be wrapped in an Application? I just wasted an hour trying to figure out some crypitic error message in line 400 of teh, only to finally find it was caused because you can’t next an Application in an Application.

    Then , I change that to group, and now I get some completely random and cryptic: VerifyError: Error #1014: Class spark.components::Group could not be found. This is a big project, using tons of spark groups…I don’t get it.


  10. Shawn says:

    Well it was because the file was marked as a default application, duh! So when I hit compile, it was still trying to run the Datagroup as it’s own app.

    I couldn’t figure out how to unmark it as a default, (maybe because I had just drag&dropped the file in my project)??

    But I just needed to make a fresh mxml component and paste the code in, and it works good now.

    Thanks dude, sorry for the rant earlier…

  11. Flexicious says:

    In regards to the comment about corresponding third party DataGrid components for SilverLight, we’re glad to be able to fill in the void in the Flex space for a robust third party DataGrid component. We’ve just released Flexicious Ultimate, a DataGrid component that we wrote from the ground up to provide a lot of Functionality, especially around hierarchical data display. Check it out at