Using the DataGrid Component - Page 2

In the previous page, you dragged and dropped your DataGrid component to the stage and made some Property changes. Let's add some code and look at how this all works in greater detail in this page.

6. Now that your DataGrid component is setup on your stage, let's add some code. Right click on the first frame of your timeline and select the Actions menu item. The Actions window should appear, so copy and paste the following lines of code into the window:

function dataGridFunction() {

var characters:Array = new Array(new Array("Jerry", "Seinfeld"),

new Array("Elaine", "Benes"),

new Array("Cosmo", "Kramer"),

new Array("Jocopo", "Peterman"),

new Array("Lloyd", "Braun"),

new Array("Estelle", "Costanza"),

new Array("George", "Costanza"),

new Array("Frank", "Costanza"),

new Array("David", "Puddy"),

new Array("Mickey", "Abbott"),

new Array("Morty", "Seinfeld"),

new Array("Helen", "Seinfeld"));

//

for (var i:Number = 0; i < characters.length; i++) {

var firstName:String = characters[i][0];

var lastName:String = characters[i][1];

dataGridMain.addItem({First:firstName, Last:lastName});

}

 

dataGridMain.setStyle("fontFamily", "Verdana");

dataGridMain.setStyle("headerColor", "0xA6CBDD");

dataGridMain.setStyle("alternatingRowColors", ["0xF0F0F0", "0xFFFFFF"]);

dataGridMain.setStyle("rollOverColor", "0xDCEBF1");

dataGridMain.setStyle("selectionColor", "0xFFF97D");

dataGridMain.setStyle("selectionDuration", 300);

}

dataGridFunction();

7. When you preview your animation, you will notice that your DataGrid component looks and behaves just like the example animation I posted earlier.

Detailed Look
In the previous page, you created a working DataGrid example. Let's look at the code in greater detail.

Adding Data
Basically, the form you would take for adding data to a DataGrid is as follows:

dataGridName.addItem(column1:Data1, column2:Data2);
dataGridName.addItem(column1:Data3, column2:Data3);
dataGridName.addItem(column1:Data5, column2:Data4);

You would often have numerous of those above lines to populate a DataGrid with many values, and needless to say, that approach is not the most efficient way to add large collections of data. Instead, a more dynamic approach is the method highlighted in the code you used earlier. In my example, you basically have a nested array of popular characters from the TV sitcom Seinfeld being added to the DataGrid component using a for loop:

for (var i:Number = 0; i < characters.length; i++) {

var firstName:String = characters[i][0];

var lastName:String = characters[i][1];

dataGridMain.addItem({First:firstName, Last:lastName});

}

Notice that the column names are First and Last, and the data being added is in the form of a string extracted from the two-dimensional characters array. The loop basically goes through each array, extracts the relevant information from the array, and puts it in the ({column:Data,...,etc.}) form needed to add data to the DataGrid component.

Onwards to the next page!

1 | 2 | 3