A Minimal DataGrid Example

This is the first in a series of short items about the new Spark DataGrid component.  The DataGrid displays a list of data items in a grid of rows and columns, one item per row and one aspect of each item (usually a property) in each column.   The Spark DataGrid's capabilities and API are similar to the previous MX version of the Flex SDK.  The Spark version is skinnable, supports "smooth scrolling", and all of its visual elements, including item renderers, can be Spark components or graphic elements.

A detailed specification for the Spark DataGrid can be found on opensource.adobe.com.  The API documentation for DataGrid can be found on help.adobe.com.

This example depends on the 4.5 release of the Flex SDK which made its debut on May 2nd, 2011. The easiest way to give it a try is by giving the new 4.5 version of Flash Builder.

In this very simple DataGrid example an ArrayCollection of DataItems is displayed.

<s:DataGrid requestedRowCount="5">
    <s:ArrayCollection>
        <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
        <s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
        ...
    </s:ArrayCollection>
</s:DataGrid>

The ArrayCollection defines the DataGrid's dataProvider.   The DataGrid displays one dataProvider item per row, and it automatically creates one column for each property in the first item.   The dataProvider property tag isn't specified because it's the default property and leaving it out makes the code look just a little simpler.  Although any class that implements IList can be used an a dataProvder, ArrayCollection is convenient because it enables the column sorting support.
 
We've used the Spark DataItem class to create dataProvider items for this example although in this case fx:Object would have worked equally well, because the example doesn't rely on data item property bindings.  DataItem is used to define an untyped Object whose properties are bindable.

The DataGrid requestedRowCount specifies the number of rows to be displayed.  Since more dataProvider items are specfied, the DataGrid's Scroller makes its vertical scrollbar visible.

Here's the example itself, and the source code.

DataGridMinimalExample.mxml