| As soon as the DataGrid instance has data in it, it automatically has "stretchable," sortable columns. With "stretchable" columns, the user can position the mouse cursor in the header row on the vertical line between any two columns. The cursor turns into a two-headed arrow pointing right and left, as shown in Figure 23.2. The user can then click and drag to move the boundaries of the two columns left or right. (Microsoft Word tables and Excel spreadsheets have a similar feature.) The user can click once in the header, in any column, to sort the DataGrid based on the values in that column. Figure 23.2. The two-headed arrow cursor indicates that you can click and drag to stretch or shrink the adjacent columns, moving the boundaries between the two columns. 
In addition to these default DataGrid features, you can use the methods of the DataGrid class, or the DataGridColumn class, to modify the DataGrid or individual columns in various ways. For instance, you can remove a column, change the header text in a column, or highlight a row. Removing a Column The ProductID field returned by getBooks() is not particularly useful to the user. You can remove it using the removeColumnAt() method of the DataGrid class. Because this is the left-most column, which is column 0, the statement looks like this: books_dg.removeColumnAt(0);
In getBooks_rem.fla on the CD accompanying this book, you trigger this action by clicking the Clear 1st Column button. The removeColumnAt() method removes a column after the column has already been displayed. You can prevent a column from displaying in the first place by setting the columnNames attribute of the DataGrid to an array containing the names of the columns you want to display. Here's an example, found on line 8 of getBooks_rem.fla: books_dg.columnNames = ["ProductName","ListPrice","Weight"];
The preceding line is commented out in the sample file. Just uncomment it if you want to see how it works. You may also want to uncomment lines 13 and 14 to space the three columns equally.  | If you are using the columnNames attribute to predetermine the columns that appear in the DataGrid, and nothing is appearing in one or more columns, see the "Troubleshooting" section at the end of this chapter . |
Changing Column Headers DataGrid header text defaults to the names of the database fields. You can set the text in the headers to something more readable or understandable by setting the column's headerText attribute. To get a reference to the column, use the getColumnAt() method of the DataGrid class. For example, the following statement changes the header text on column 0 (the left-most column) to "Product ID": books_dg.getColumnAt(0).headerText = "Product ID";
In getBooks_rem.fla on the CD accompanying this book, the header text on all columns is changed when you click the Change Labels button. Changing a Row's Background Color You can change the background color of a DataGrid row by using the setPropertiesAt() method of the DataGrid class. For example, the following statement changes the backgroundColor property of row 0 to green: books_dg.setPropertiesAt(0, {backgroundColor:0x00FF00});
In the preceding line, the first parameter is the index of the DataGrid row. The index here is 0, which is the first row below the header. Formatting Columns To format columns, use the setStyle() method of the DataGridColumn class. For instance, the following lines set the left-most column's background color to red, and the font in that column to bold, underlined , size 14: books_dg.getColumnAt(0).setStyle("backgroundColor",0xff0000); books_dg.getColumnAt(0).setStyle("fontWeight","bold");' books_dg.getColumnAt(0).setStyle("textDecoration","underline"); books_dg.getColumnAt(0).setStyle("fontSize",14);
Responding to Clicks on Headers The events associated with the DataGrid class allow you to create callback functions that fire when the user interacts with the DataGrid in various ways. For example, if you want to do something whenever the user clicks on a header, you can use the headerRelease event like this: var myListener:Object = new Object(); myListener.headerRelease = function(eventObject){ // your code goes here } books_dg.addEventListener("headerRelease", myListener);
In the headerRelease() callback function, the eventObject parameter has four attributes. The first two are standard for all DataGrid callback functions. -
type ” The type of event, "headerRelease" in this example -
target ” The object broadcasting the event, books_dg here -
columnIndex ” The clicked column -
view ” An object responsible for rendering the DataGrid The view object is an extremely rich one. (In the Flash MX 2004 authoring environment, click on any header in the DataGrid displayed by getBooks_rem.fla, and all the properties of the view object will the displayed in the Output window. It takes up several pages of output.) By examining the properties of the view object, you can find out anything you need to know about the DataGrid object. Similarly, by using the methods of the view object, you can modify the DataGrid object. For example, this underlines all the text in the DataGrid: eventObject.view.setStyle("textDecoration","underline");
To underline just the text in the column that was clicked, use the columnIndex attribute of eventObject : i = eventObject.columnIndex; eventObject.view.getColumnAt(i).setStyle("textDecoration","underline");
The preceding two code snippets are included (though commented out) in getBooks_rem.fla. What is actually implemented in the headerRelease event (and not commented out) is numeric sorting for columns with numeric data. Otherwise, by default, numeric columns sort alphabetically . The alternate sort uses the sortItems() method of the DataGrid class. This method is inherited from the List class, and is identical to the sort() method of the Array class.  For information on the sort() method of the Array class, see "sort() and sortOn()," page 564 , in Chapter 21, "Advanced ActionScript."
To implement the numeric sort, you need to do two things: create a numeric sort function, and tell the DataGrid object to use it. If the numeric sort function is numericSortFunc() , then within the releaseHeader event, the following line tells the DataGrid object to use the numeric sort function: eventObject.target.sortItems(numericSortFunc);
When the user clicks on a column header, the numeric sort function is called numerous times, to compare each row in the DataGrid to every other row. Two items (row objects) are passed to the numeric sort function each time it is called. The numeric sort function compares the values for the clicked column in the two items. Here is the essence of the numeric sort function, which closely parallels the byVotes() comparison function in Chapter 21: function numericSortFunc (a , b) { var colName:String = eventObject.target.columnNames[eventObject.columnIndex]; return b[colName] - a[colName]; }
The preceding function first gets the name of the column ( colName ) and then uses that name to retrieve the value for that column in each item. One value is then subtracted from the other, and the result is returned. In getBooks_rem.fla, the numeric sort function is somewhat more complex, for two reasons: First, we want to sort only numeric columns numerically . Columns containing string data should still be sorted alphabetically. In getBooks_rem.fla, the items in the column are examined after the header is clicked, and only numeric columns are sorted numerically. Second, the default behavior for the DataGrid object is to re-sort the column each time it is clicked, alternating between sorting in ascending and descending order. This behavior is duplicated for the numeric sort, which makes it necessary to keep track of the current sort state for each column. The ActionScript code associated with these enhancements is commented in getBooks_rem.fla. Responding to Rollovers By default, the DataGrid highlights a row (that is, changes the background color) as you roll over it. You can capture the itemRollOver event and add to or change that default behavior. The index of the row is received as the index property of the event object. The following code captures the itemRollOver event. The callback function first resets the background color to white for all rows in lines 2 and 3, and then changes the background color for the rollover row to sky blue (0xCCFFFF) in line 4: 1: myListener.itemRollOver = function (eventObject) { 2: for (i = 0 ; i < books_dg.rowCount ; i++) 3: books_dg.setPropertiesAt(i, {backgroundColor:0xFFFFFF}); 4: books_dg.setPropertiesAt(eventObject.index, {backgroundColor:0xCCFFFF}); 5: } 6: books_dg.addEventListener("itemRollOver", myListener);
| 