by kirupa |
23 July
2006
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.
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();
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);
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.
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.
This is a companion discussion topic for the original entry at https://www.kirupa.com/developer/flash8/datagrid3.htm