Flash DataGrid Component Style and Sorting

Date: October 28th, 2007   No comments

Not the simplest Flash components to style, but the DataGrid component has it all in there, it just takes patience and help from others to find all the right attributes to touch. The table presentation is elegant but the key is the ability to sort non-string data correctly. Credits to kirupa.com for the fine tuning (link below). The San Marcos Preserve website has changed hands, so the live version is no longer available.

import mx.transitions.Tween;
import mx.transitions.easing.*;

var lots:Array = new Array();

var debug:Boolean = false;

if(debug == true){
	var keytablexml = 'map_settingstable.xml';
} else {
	var keytablexml = '/system/includes/map_settingstable.php';
}

/*
// Static Test
lots = [
        {lot: 1, area:"27.34", envelope:"3.62", easement:"23.72"},
        {lot: 2, area:"27.34", envelope:"3.62", easement:"23.72"},
        {lot: 3, area:"27.34", envelope:"3.62", easement:"23.72"},
        {lot: 4, area:"27.34", envelope:"3.62", easement:"23.72"},
        {lot: 5, area:"27.34", envelope:"3.62", easement:"23.72"},
		{lot: 6, area:"27.34", envelope:"3.62", easement:"23.72"},
        {lot: 7, area:"27.34", envelope:"3.62", easement:"23.72"},
        {lot: 8, area:"27.34", envelope:"3.62", easement:"23.72"},
        {lot: 9, area:"27.34", envelope:"3.62", easement:"23.72"},
        {lot: 10, area:"27.34", envelope:"3.62", easement:"23.72"},
		{lot: 11, area:"27.34", envelope:"3.62", easement:"23.72"},
        {lot: 12, area:"27.34", envelope:"3.62", easement:"23.72"},
        {lot: 13, area:"27.34", envelope:"3.62", easement:"23.72"},
		{lot: 14, area:"27.34", envelope:"3.62", easement:"23.72"},
        {lot: 15, area:"5.22", envelope:"1.12", easement:"4.10"}];
*/
		
function init() {
		
	debug_txt.text = "Init";
	
	// Load up Settings XML
	var send_lv:LoadVars = new LoadVars();
	// if we need to pass a variable to our settingsFile in a php/mysql settings.php
	// send_lv.catchoice = catchoice;
	 
	var xmlObjReply:XML = new XML();
	xmlObjReply.ignoreWhite= true;
	//xmlObjReply.onLoad = LoadMySettings;
		
	send_lv.sendAndLoad(keytablexml,xmlObjReply,"POST");
	var interval_load:Number = setInterval(checkProgress, 100, _root.send_lv);
	xmlObjReply.onLoad = function(success:Boolean) {
		clearInterval(interval_load);
		if (success) {
			parserA(xmlObjReply);

			setupDataGrid();
			
		} else {
			trace("Error. Settings are unavailable.");
			debug_txt.text = "Sorry, the system is temporarily unavailable.";
		}
	}
}
	
function parserA(myObjectXML){
	this = myObjectXML;
	settings = new Array();
	var itemList = this.childNodes[0].childNodes;
	var itemListLen = itemList.length;
	for (i=0; i < itemListLen; i++) {
		var subList = itemList[i].childNodes;
		var subItemLen = subList.length;
		itemObj = {};
		itemObj.sub = [];				
		itemObj.lot = Number(itemList[i].attributes.lot);
		itemObj.area = Number(itemList[i].attributes.area);
		itemObj.envelope = Number(itemList[i].attributes.envelope);
		itemObj.easement = Number(itemList[i].attributes.easement);
		lots.push(itemObj);
	}
};
		
function setupDataGrid() {
	// DataGrid
	keytable_dg.columnNames = ["lot", "area", "envelope", "easement"];
	// set formatting of column
	
	keytable_dg.setStyle("fontFamily","RequiemT");
	keytable_dg.setStyle("fontSize",11.5);
	keytable_dg.getColumnAt(0).width = 50;
	keytable_dg.getColumnAt(0).headerText = "Lot #";
	keytable_dg.getColumnAt(1).width = 105;
	keytable_dg.getColumnAt(1).headerText = "Lot Area(Acres)";
	keytable_dg.getColumnAt(2).width = 75;
	keytable_dg.getColumnAt(2).headerText = "Envelope";
	keytable_dg.getColumnAt(3).width = 80;
	keytable_dg.getColumnAt(3).headerText = "Easement";
	
	keytable_dg.embedFonts= true;
	
	keytable_dg.setStyle("borderStyle", "none");
	keytable_dg.setStyle("vGridLines", false);
	keytable_dg.setStyle("hGridLines", false);

	keytable_dg.setStyle("headerColor", 0xFFFFFF);
	keytable_dg.setStyle("vGridLineColor", 0xFFFFFF);
	keytable_dg.setStyle("selectionColor", 0xFFFFFF);
	keytable_dg.setStyle("rollOverColor", 0xFFFFFF);
	
	keytable_dg.setStyle("headerUIStyle", "roundcorner");
	keytable_dg.setStyle("headerBackgroundColor", 0xFFFFFF);
	keytable_dg.setStyle("headerSelectionColor", 0xFFFFFF);
	keytable_dg.setStyle("headerBottomColor", 0xFFFFFF);
	
	keytable_dg.setSize(310,320);
	keytable_dg.hScrollPolicy = "off";
	keytable_dg.vScroller._visible = false;
	keytable_dg._x = 0;
	keytable_dg._y = 0;
	
	keytable_dg.dataProvider = lots;

	// set border_mc to transparent
	keytable_dg.border_mc._alpha = 0;

	// see hideBgd()
	setTimeout(hideBgd, 500);
}

// Hides background of DataGrid. Must delay until the Datagrid is ready
function hideBgd():Void {
	var i:Number = 10;
	while (keytable_dg.content_mc["listRow"+i] != undefined) {
		keytable_dg.content_mc["listRow"+i].bG_mc._alpha = 0;
		i++;
	}
}

var sortListener:Object = new Object();
sortListener.headerRelease = function(event) {
	
	//specifying the column index number
	var columnIndex:Number = event.columnIndex;
	
	var arrayOrder:Number = Array.NUMERIC;
	if (keytable_dg.sortDirection == "DESC") {
		arrayOrder = arrayOrder | Array.DESCENDING;
	}
	keytable_dg.sortItemsBy(keytable_dg.getColumnAt(columnIndex).columnName, arrayOrder);
};
keytable_dg.addEventListener("headerRelease", sortListener);


init();

kirupa.com
San Marcos Preserve