Using the DataGrid Component - Page 3

In the previous page, you learned how to dynamically add data to your DataGrid. On this page, you will learn how to sort numbers using the DataGrid component.

Sorting by Number
The DataGrid component sorts all data alphabetically. That is great for First and Last names, but it is not that useful for non-string data. Even if you enter numbers in a raw number form, the default sort method still sorts the columns alphabetically.

So, to sort numerical data, use the following section of code:

var sortListener:Object = new Object();

sortListener.headerRelease = function(event) {

 

//specifying the column index number

var columnIndex:Number = 1;

 

if (event.columnIndex == columnIndex) {

var arrayOrder:Number = Array.NUMERIC;

 

if (dataGridMain.sortDirection == "DESC") {

arrayOrder = arrayOrder | Array.DESCENDING;

}

dataGridMain.sortItemsBy(dataGridMain.getColumnAt(columnIndex).columnName, arrayOrder);

}

};

dataGridMain.addEventListener("headerRelease", sortListener);

The code itself is pretty self-explanatory, so I won't divert this tutorial by going through it in great detail. You basically create a listener object to detect when you click on a header, and after specifying the column you wish to sort numerically, you detect whether you are sorting down or up. The sortItemsBy method takes two arguments - the column and the type of sort to be performed.

My code assumes that you will be sorting the second column, columnIndex = 1, and the instance name of the DataGrid to be sorted, dataGridMain. Be sure to change those values to suit your animation if necessary.

For a full working example using the above code, here is a variation of our earlier DataGrid example:

[ notice that you can scroll the data and sort either by first or last name ]

The full code for the above example is:

function dataGridFunction() {

var characters:Array = new Array(new Array("Jerry", 24), new Array("Elaine", 10), new Array("Cosmo", 4), new Array("Jocopo", 12), new Array("Lloyd", 12), new Array("Estelle", 7), new Array("George", 25), new Array("Frank", 0), new Array("David", 1), new Array("Mickey", 19), new Array("Morty", 30), new Array("Helen", 32));

//

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

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

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

dataGridMain.addItem({Player:firstName, Points:lastName});

}

var sortListener:Object = new Object();

sortListener.headerRelease = function(event) {

//specifying the column index number

var columnIndex:Number = 1;

if (event.columnIndex == columnIndex) {

var arrayOrder:Number = Array.NUMERIC;

if (dataGridMain.sortDirection == "DESC") {

arrayOrder = arrayOrder | Array.DESCENDING;

}

dataGridMain.sortItemsBy(dataGridMain.getColumnAt(columnIndex).columnName, arrayOrder);

}

};

dataGridMain.addEventListener("headerRelease", sortListener);

dataGridMain.addEventListener("sortByNumber", this);

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();

Styling the DataGrid
Another area in which you can customize your DataGrid is in the colors. The default DataGrid looks pretty nice, but because it is default, you will find many other sites using the same style for the DataGrid component. Therefore, to differentiate your DataGrid, you can style it.

For a good overview of the list of styles you can use, Adobe's LiveDocs are a good source. In my code, I just gleaned what I think are the most useful style changes you can make from the various DataGrid styles as well as styles inherited from the components that make up the DataGrid:

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);

Conclusion
So, there you go - that is all there is to using DataGrids. You can find numerous other options you can tweak, and Macromedia's documentation or 3rd-party web sites are good sources of information on other DataGrid tricks. Because the internal workings of the DataGrid are hidden from us, I did not elaborate on the code in great detail like I normally would. Some might consider that a good thing!

For the most part, due to the large file size of the DataGrid, I do not encourage users to use this component. Unfortunately, the complexity of creating your own DataGrid component makes writing your own DataGrid-like feature time-consuming. Whether writing your own component and gaining an advantage in file-size over a disadvantage in time taken to develop is a reasonable plan, is up to you. After all, software development is often about making compromises and choosing the best path given the current situation.

I have provided the source files for both the simple and numeric DataGrid examples.

1 | 2 | 3