# How to control DataGrid sorting and header styles?

**URL:** https://forum.kirupa.com/t/how-to-control-datagrid-sorting-and-header-styles/273952
**Category:** flash
**Created:** [October 23, 2008, 1:03am UTC](https://forum.kirupa.com/t/how-to-control-datagrid-sorting-and-header-styles/273952 "2008-10-23T01:03:11Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![mindfriction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mindfriction/32/172_2.png) [@mindfriction](https://forum.kirupa.com/u/mindfriction)
#### Post date: [October 23, 2008, 1:03am UTC](https://forum.kirupa.com/t/how-to-control-datagrid-sorting-and-header-styles/273952/1 "2008-10-23T01:03:11Z")

</div>

Hi guys,

would like some help on enabling logical sorting of numeric and textural data loaded from CSV file. And also how to style the header with a block colour (i.e. no gradient). Below is what I have so far but for some reason the numeric sorting on the ‘total’ column isnt working and the header is still gradient

```auto

var sortListener:Object = new Object();
sortListener.headerRelease = function(event) {
        
        if (event.target.columns[event.columnIndex].columnName) {
                
                if (event.target.columns[event.columnIndex].columnName == "Total") {
                        
                        var arrayOrder:Number = Array.NUMERIC;
                        event.target.columns[event.columnIndex].sortOptions = Array.NUMERIC;
                        if (dataGrid_mc.sortDirection == "DESC") {
                                arrayOrder = arrayOrder | Array.DESCENDING;
                        } 
                        dataGrid_mc.sortItemsBy(dataGrid_mc.getColumnAt(columnIndex).columnName,arrayOrder);
                }
                        
        }
};
dataGrid_mc.addEventListener("headerRelease",sortListener);
dataGrid_mc.sortableColumns = true;
 
import mx.styles.CSSStyleDeclaration;
// make the header block blue with white labels
var headerStyles = new CSSStyleDeclaration();
headerStyles.setStyle("color", "0xFFFFFF");
headerStyles.setStyle("backgroundColor", "0x3B73B9");
dataGrid_mc.setStyle("headerStyle", headerStyles);
 
dataGrid_mc.setStyle("fontFamily","GE Inspira");
dataGrid_mc.setStyle("fontSize","16");
dataGrid_mc.setStyle("embedFonts","true");
dataGrid_mc.setStyle("alternatingRowColors",["0xF0F0F0", "0xFFFFFF"]);
dataGrid_mc.setStyle("rollOverColor","0xDCEBF1");
dataGrid_mc.setStyle("selectionColor","0xFFF97D");
dataGrid_mc.setStyle("selectionDuration",300);
 
 
var csvLoad:CSV = new CSV();
// ::NOTE:: Use the columns array to set the column headers if you don't want to use the first row in the CVS as the headers
//csvLoad.columns = new Array('Column 1', 'Column 2', 'Column 3');
// ::NOTE:: If the values in your CSV are surrounded by a qualifier you should set that before you load the data file
//csvLoad.qualifier = '"';
csvLoad.load('RetraTop20.csv');
csvLoad.onLoad = function() {
        // Ouput data to Macromedia's Data Grid UI Component
        dataGrid_mc.dataProvider = this.data;
}

```