DataGrid creation in Flex Builder 3 through Actionscript 3

I tried a few times to update a datagrid, created in MXML, with information from an XML file. Only to discover that it wasn’t easy to get away from caching issues that I was running into as a result of my itemRenderer. My solution was to build the datagrid, from scratch, in each instance and delete it when I needed to fetch a new result. Thus eliminating my caching problem, as the previous data was completely cleared. Problem was, I couldn’t find anything that told me the correct way to create a DataGrid in AS3 inside my MXML app. I pieced it together and here’s a simple example.

Disclaimer: There may be a better way to do this, but it worked, and I’m happy.

import mx.charts.series.ColumnSeries;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.DataGrid;

// Creating the dataprovider
var myXML:XMLList = event.result.item;

// Creating the datagrid itself
var myGrid:DataGrid = new DataGrid;
  // Setting some properties
  myGrid.dataProvider = myXML;
  myGrid.width = 320;
  myGrid.rowCount = myXML.length();
  myGrid.rowHeight = 25;

// Creating the first column
var columnOne:DataGridColumn = new DataGridColumn;
  // Setting some properties
  columnOne.headerText = 'Column One';
  columnOne.width = 25;

// Creating the second column
var columnTwo:DataGridColumn = new DataGridColumn;
  // Setting properties
  columnTwo.headerText = 'Column Two';

// New array to hold the column information
var cols:Array = new Array;
  // Add the column information to the new array
  cols.push(columnOne);
  cols.push(columnTwo);

// Apply the array to the datagrid
myGrid.columns = cols;

// Add the datagrid to the workspace so it will display
mx.core.Application.application.addChild(myGrid); // In this case my datagrid was created inside a component, so I had to reference the parent when passing it.

6 Comments on “DataGrid creation in Flex Builder 3 through Actionscript 3”

  1. Allister Smith says:

    Thanks.

    Great solution works really well. I can do everything (and more) with this DataGrid that I could do with mxml. I can even use scrollToIndex(i) to get the datagrid to scroll down and display a row that was outside of the view area.

    Good stuff!

  2. tsungtm says:

    Thank You Very Much for this handy AS3 help!

  3. Basha says:

    Thank U, Thank U very much for giving this code. I tried to create a datagird totally in Action Script (Flex) from morning. Finally i created through your help.

    Iam very happy.

    Anyway once again Thank U very much.

  4. Antony says:

    Hi – thanks for the post.
    When I try this, at the point when the grid is added to the application, I get the following error:
    “[Fault] exception, information=TypeError: Error #1009: Cannot access a property or method of a null object reference.”
    I am using FlashDevelop with the Flex SDK installed, and seem to get this error when trying to display some of the flex components [DataGrid and ComboBox], while others of them work correctly. Any help with this would be fantastic.
    Thanks

  5. Destiny says:

    Thanks for sharing information! It was useful for me.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>