Using ActionScript to set DataGrid columns
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.
Thanks for the post.
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!
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.
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.
Sorry Prakash, but I’m not sure what you’re asking for there.
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.