A Simple GridColumn DataGrid Example

A DataGrid's columns are specified by an ordered list of GridColumn objects.  GridColumns define what aspect of each dataProvider item is displayed, typically by specifying a dataField, the name of an item property.   If a list of columns is not provided, then the DataGrid creates one GridColumn for each public property in the first dataProvider item.   This is usually inadequate for applications, since developers will want to control the order columns are displayed in, along with how the columns and data items are displayed.  For example developers can specify GridColumn properties like headerText, the text that appears in the column's header.

Here's a simple DataGrid example with explicitly specified columns.

<s:DataGrid id="dataGrid" left="10" right="10">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="key" headerText="Key"/>
            <s:GridColumn dataField="name" headerText="Name"/>
            <s:GridColumn dataField="price" headerText="Price"/>
            <s:GridColumn dataField="call" headerText="Call"/>
        </s:ArrayList>
    </s:columns>

    <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>

A DataGrid's columns property is an IList, just like the dataProvider, and can defined with an ArrayList.  So, per the example, dataGrid.columns.length returns the total number of columns and dataGrid.columns.getItemAt(index) returns the GridColumn at the specified index.  The columns list is mutable, which means that GridColumns can be added or removed at any time.  Note that in this case an ArrayList is preferable to an ArrayCollection, which is often used for the dataProvider, because the columns will not be filtered or sorted.

Column widths do not depend on the column's headerText, they're based on the rendered widths of the DataGrid's typicalItem.  If that's not specified, then the first data item is used.  That's the case here.  Each column can specify an explicit width and by default all GridColumns are resizable="true", which means that the column can be interactively resized by dragging the edges between columns.  Interactively resizing column widths changes the DataGrid's measuredWidth which can be a little disconcerting if the DataGrid's width is not constrained.  In this example we've constrained the DataGrid's left and right edges which prevents changes in the DataGrid's measuredWidth from affecting its actual width.


Here's a running version of the example, and the source code.  Try resizing and sorting columns by dragging the edges between column headings or clicking on the column headings respectively.