Posts tagged Private Function

Flex 3: Forcing Numeric Sort of XML Data in a Data Grid

Nov 20th

Recently I’ve ran into some problems with AdvancedDataGrids in Flex with data loaded from a hierarchical data provider built from an XML object. When you try to sort on a column with numeric values, the data grid does not sort the values numerically. Instead it sorts them lexicographically. This is because Flex 3 treats all the attributes of an XML node as strings. So if you have an/some attribute(s) that is numeric amongst all of your nodes, Flex treats these as strings when sorting. It is apparently not smart enough to realize that the values are numeric and should be sorted as such.

Unfortunately, Flex doesn’t appear to provide an easy way to say that a certain column contains numeric values. A simple attribute of the AdvancedDataGridColumn element called valueType or something along those lines that you could simply say valueType=”Number” would be incredible, but that functionality does not exist. So what you have to do is write a sortCompareFunction for each of these columns. Well, if you have a bunch of different columns you would usually have to write one sortCompareFunction for each column.

That could get tedious and time consuming. Instead, declare the following function:

private function xmlDataGridNumericSorter(field:String):Function 
{
	return function (xml1:Object, xml2:Object):int 
	{
		var diff:Number = ((Number)(xml1.attribute(field)) - (Number)(xml2.attribute(field)));
		return (diff > 0) ? 1 : ((diff < 0) ? -1 : 0);
	}
}

What this function does is return a compare function that would compare the values of two XML node’s attribute (field:String). So what you do from there forth is loop over your columns that are numeric and do the following to each column, referenced in the example as col:

col.sortCompareFunction =  xmlDataGridNumericSorter(col.dataField);

After that each of the columns you modified in this way will have a sortCompareFunction built to compare two XML nodes’ respective attributes numerically. Keep in mind with the above code that if your column’s dataField is prefixed with an at sign (@), which it very well should since you’re probably referencing an XML attribute, you will need to remove it when you are passing the dataField into the xmlDataGridNumericSorter function by adding .replace(“@”,”") after col.dataField.

I hope this helps people as much as it has helped me in the past few weeks!

Adobe, Attribute, Attributes, Columns, Data Grid, Data Provider, Datagrid, Element, Flex, Functionality, Hierarchical Data, Loaded, Numeric Sort, Numeric Values, Private Function, Return Num, Sorts, String Function, Time Consuming, Xml Code, Xml Data, Xml Node, Xml Object

Flex AdvancedDataGrid/DataGrid Optimizer

Nov 11th

Posted by JonnyFunFun in Flex/ActionScript

6 comments

Okay, this one is for all the fellow ActionScript/Flex programmers out there. Have you ever dumped data into a DataGrid or an AdvancedDataGrid only to have your column widths be completely off, or even your row heights be off? Don’t you hate it when the contents of your grid’s cells are cut short? Well here is an easy function that resizes your columns and your grid’s rowHeight so that your data is completely displayed (provided your grid is large enough, of course).

This function takes into account both width and height, and allows you to specify padding for the width and height. It analyzes the measured display height and width of each data cell and assigns the largest values for width to each column, and the largest value for height to the DataGrid/AdvancedDataGrid’s row height. Simply pass it the DataGrid/AdvancedDataGrid you want to optimize width and height for, and the padding values, should you want to put in padding. I call this the xGrid Optimizicator™. Hope it comes in useful!

import mx.controls.AdvancedDataGrid;
import mx.controls.advancedDataGridClasses.*;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.*;
 
private function optimizeDataGrid(dg:Object,widthPadding:uint = 0,heightPadding:uint = 0):void
{
if ((!dg is AdvancedDataGrid) && (!dg is DataGrid))
return;
 
var col:uint;
var tf:TextFormat;
var renderer:UITextField;
var widths:Array = new Array(dg.columnCount);
var height:uint = 0;
var dgCol:Object;
 
if (dg.columnCount > 0 && dg.dataProvider != null)
{
for (col = 0; col < dg.columnCount; ++col)
widths[col] = -1;
for each (var item:Object in dg.dataProvider)
{
for (col = 0; col < dg.columnCount; ++col)
{
if (dg is AdvancedDataGrid)
renderer = new AdvancedDataGridItemRenderer();
else
renderer = new DataGridItemRenderer();
dg.addChild(renderer);
dgCol = dg.columns[col];
renderer.text = dgCol.itemToLabel(item);
widths[col] = Math.max(renderer.measuredWidth, widths[col]);
height = Math.max(renderer.measuredHeight, height);
dg.removeChild(renderer);
}
}
for (col = 0; col < dg.columnCount; ++col)
{
// Added to take into account header text - thanks modtodd!
renderer = new DataGridItemRenderer();
dg.addChild(renderer);
renderer.text = dg.columns[col].headerText;
widths[col] = Math.max(renderer.measuredWidth,widths[col]);
dg.removeChild(renderer);
if (widths[col] != -1)
dg.columns[col].width = widths[col] + widthPadding;
}
if (height != 0)
dg.rowHeight = height + heightPadding;
}
}