Tuesday, May 10, 2011

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:GridColumn dataField="key" headerText="Key"/>
            <s:GridColumn dataField="name" headerText="Name"/>
            <s:GridColumn dataField="price" headerText="Price"/>
            <s:GridColumn dataField="call" headerText="Call"/>

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

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.


  1. Hello Hans,

    Thank you for this most informative article. I am about to use, but have a question.

    I am brand new to blogging, and I do not understand the 4th column-Call=true or false. Is it necessary to have that column? What is the meaning of true/false?

    Also, I want a 3 column, fixed width list. Where do I put the fixed width code?

    Thank you again for the article,


  2. This comment has been removed by the author.

  3. The fourth column was just included to demonstrate displaying a boolean value

    The columns are specified explicitly, so if you only want three, only include three GridColumn in the columns list.

    As far as the width goes, you could specify the width of the DataGrid, like this:

    <s:DataGrid id="dataGrid" requestedRowCount="10" width="400">

    Or you could provide explicit widths for the GridColumns.

  4. By Default, in Datagrid Column widths do not depend on the column's headerText, they're based on the rendered widths of the DataGrid's typicalItem.

    I want to make the grid's collumns with should be based on the headertext of that collumn.[Dont want to set the collumn width explicitly in the GridCollum].

    Thanks in advance,

    1. Basing the columns' widths on their header text is a completely reasonable requirement however (sadly) there isn't a straightforward way to do that with the current Spark DataGrid. It was among the features we'd planned the Flex release after 4.6 but I'm not sure when the work will actually get done.

      Sorry about that.

    2. This comment has been removed by the author.

  5. draggableColumns property is it working in spark DataGrid ?

  6. The example was created with the version of Flex5 we were working on late last year. I don't believe that draggable columns are supported in Flex 4.6.