Adobe Flex DataGrid with 4 million rows

If you already upgraded your Flash Player to 10.2, take a look at this little demo, which has three Flex DataGrid components. Two of them on the left are good old mx:DataGrid and the one on the right side is the extension of new spark:DataGrid available with the recent Flex SDK 4.5 drop.

All the UI controls share our custom implementation of IList/ICollectionView and are able to show 4 million records. Actually, with mx:DataGrid you can go even further and display 10 million records. As a side note, if you stick to MX-only components, the example may be compiled with Flex SDK 3.4 and work with older version of the player.

The spark:DataGrid is a more complex case. First, unlike with MX equivalent we have to subclass original component to add scrolling event. Second, it seems that Spark GridLayout has overflow errors when calculating layout for the dataProvider of approximately 5 million records and above — hence the limitation of mock data set size in demo.

Finally, there is an error with fast scrolling using scroller thumb: after thumb-scrolling spark:DataGrid it’s necessary to move up/down with scroller’s arrow keys otherwise Spark grid would repaint itself after scrolling of mx:DataGrid-s. We are working on this issue – most probably our extension either misses a thumb scroll event or needs to be better synced with the scrolling events.

Don’t try it at home with the default IList implementation (ArrayList) – it’ll eat up all your memory.

Valery Silaev

9 thoughts on “Adobe Flex DataGrid with 4 million rows

  1. @Tom These are not bugs. Apparently, Adobe doesn’t see a use case for supporting these features.
    We are making little improvements for our customers here and there, and this is one of them.

  2. Mark,

    1. Actual requirements were to avoid the scrolling lock-ups when deserializing as small as 2-3K of rows. Even such small “vertical” amount of data (sure, with relatively high “horizontal” amount of data, i.e. the number of fields is 30+) may cause noticeable UI freezes. After bypassing this limit it was interesting to know how far can we get with Flex.
    2. The limited hardware (like MIDs/Tablets) poses additional restrictions, so it’s good to know we have a technique to apply on smaller data size (more realistic one) but with more restrictive environment (memory size/CPU power)
    3. Just “because we can” is a valid business goal per se for a company that offers consulting services


  3. The ‘finally’ issue about repaints sounds like a bug, though I agree that normally it’s poor UX to show a user a list of 6 million things…

  4. Tom,

    This is not bug by Adobe, this is our bug. It’s already found and fixed, updated version will be uploaded shortly.

    If you are curious, we fire our custom “scroll” event on propertyChange for verticalScrollPosition / horizontalScrollPosition of “grid” skin part. This is wrong, we have to wait for FlexEvent.UPDATE_COMPLETE on grid skin part and fire scroll event here, otherwise visible grid rows are reported incorrectly.

  5. Hi Valery,

    Great work! Is Farata Systems planning on sharing this work with the open source community? This would be helpful to a ton of developers.

    – Doug

  6. Hi,
    I have a mx:datagrid with 13k rows. It takes a lot of time for the items to get sorted. Is there a way to improve the sort performance.
    the items in the data grid example that you shared appear to get sorted in a jiffy.
    Is there an efficient way to sort items.


Comments are closed.