Home > Flex, code > Using ActionScript to set DataGrid columns

Using ActionScript to set DataGrid columns

July 14th, 2008
Goto comments Leave a comment

If you are setting a datagrid’s columns using mxml, it is a very simple process:

<mx:DataGrid id="myDataGrid" dataProvider="{ myData }">
    <mx:columns>
        <mx:DataGridColumn dataField="col1" headerText="Column 1" />
        <mx:DataGridColumn dataField="col2" headerText="Column 2" />
    </mx:columns>
</mx:DataGrid>

However, if you are setting the columns via ActionScript, it is also somewhat straightforward but requires a slight variation.

If I were to set the same columns on my datagrid above in ActionScript, you would perhaps first think that it would be something like this:

var myDataGridColumn:DataGridColumn = new DataGridColumn( "col1" );
myDataGridColumn.headerText = "Column 1";
myDataGrid.columns.push( myDataGridColumn );
myDataGridColumn = new DataGridColumn( "col2" );
myDataGridColumn.headerText = "Column 2";
myDataGrid.columns.push( myDataGridColumn );

This, however, does not work. The columns get overwritten and the new columns do not show up correctly.

The actual method for setting columns is to first set them to a separate array:

var columns:Array = [];
var myDataGridColumn:DataGridColumn = new DataGridColumn( "col1" );
myDataGridColumn.headerText = "Column 1";
columns.push( myDataGridColumn );
myDataGridColumn = new DataGridColumn( "col2" );
myDataGridColumn.headerText = "Column 2";
columns.push( myDataGridColumn );

Then from here, you set the dataGrid columns array to the newly created array of columns:

myDataGrid.columns = columns;

This will then force the datagrid to use the columns you have set rather than just using the properties from the dataprovider to create the column names.

This is about the 3rd time I’ve forgotten about this twist, so hopefully by writing a blog entry about it, it will solidify it for me.

Gareth Flex, code , ,

  1. Mike
    March 9th, 2009 at 18:50 | #1
    Reply | Quote

    Thanks for the post.

  2. Abdulelah Dandachi
    October 14th, 2009 at 09:28 | #2
    Reply | Quote

    Fantastic, thanks alot for this! It was really annoying seeing the columns in my datagrid ordered so randomly after every call to the data provider.

    Thanks!

  3. Andy Gorman
    October 15th, 2009 at 15:52 | #3
    Reply | Quote

    Thank you. I could not find how to do this in the Adobe docs. I Google search on “flex actionscript datagrid column” pointed me to your post. This is very helpful.

  4. Prakash
    December 17th, 2009 at 06:13 | #4
    Reply | Quote

    hi,
    Thank you for the post. here i have one doubt.
    if we are binding data from a arraycollection which comes from remoteobject(java POJO) and all the elements in the collection are like, inter-related objects. then hw can i bind a data from object navigation? plz give me any same code.

  5. Gareth
    December 18th, 2009 at 10:06 | #5
    Reply | Quote

    Sorry Prakash, but I’m not sure what you’re asking for there.

  6. Prakash
    December 22nd, 2009 at 02:43 | #6
    Reply | Quote

    Hi Gareth,

    Thanks for reply. Here im trying to fill a datagrid with a collection of employee objects which comes from server(java). My Employee Object in java contains primitive data types and also class objects like department class,designation class hikes class, salary class etc.. so i have to show the details of employee like his EMPID,NAME,DESIGNATION,DEPARTMENT,LAST HIKE DATE,SALARY.

    im able to bind data of primitive types. but im not getting data of my custom class objects. im using ItemRenderers. im getting null in them. since 3 days im fighting with this problem.

    thanks and regards,
    Prakash.

  1. No trackbacks yet.