Brian Kotek:
Inversion of Control

One Flex limitation I've had to work around for a long time is the need for having a complex property name as the dataField for a DataGridColumn, like this:

<mx:DataGridColumn headerText="Client" dataField="client.name" />
		

I had written a nice, generic, custom labelFunction as well as a custom NestedPropertyDataGridColumn to handle this, and it all seemed to work well.

I just discovered that the Flex team had addressed this in the Flex 3.4 SDK update, though I don't think you'd ever know it since I couldn't find any actual note that this was added. The only reason I discovered this was actually looking at the source code, and then finding this ticket in the Flex issue tracker.

So yay, we can use complex properties in our DataGridColumns now! Except...it's broken.

Ugh. Really, guys on the Flex team? This was added and no one ever bothered to click on the column to sort it? Hmph.

Anyway, as one workaround, you can use a custom DataGridColumn combined with a custom Sort to get proper sorting in most cases:

package com.briankotek.util.datagrid
{

import mx.collections.ListCollectionView;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.core.mx_internal;
use namespace mx_internal;

/**
 * A custom DataGridColumn that supports sorting a column that has a nested child property path for the dataField value.
 */
public class DataGridColumnNested extends DataGridColumn
{
	public function DataGridColumnNested( columnName : String = null )
	{
		super( columnName );
	}

	/**
	 * Override itemToLabel to force a ComparableSort custom sort class onto the parent DataGrid dataProvider.
	 * This works around a bug in sorting columns with complex property names in the dataField value.
	 * @param data
	 * @return
	 */
	override public function itemToLabel( data : Object ) : String
	{
		var parent : DataGrid;
		if( owner && owner is DataGrid )
		{
			parent = owner as DataGrid;

			if( hasComplexFieldName && parent && parent.sortableColumns && parent.dataProvider is ListCollectionView &&
				(
					!( ListCollectionView( parent.dataProvider ).sort ) ||
					!( ListCollectionView( parent.dataProvider ).sort is ComparableSort )
				)
			  )
			{
				ListCollectionView( parent.dataProvider ).sort = new ComparableSort();
			}
		}
		return super.itemToLabel( data );
	}

}
}
		

package com.briankotek.util.datagrid
{
import mx.collections.Sort;
import mx.collections.SortField;

/**
 * Custom Sort class that forces the correct compareFunction for a given field to be used.
 */
public class ComparableSort extends Sort
{
	public function ComparableSort()
	{
		super();
	}

	override public function findItem( items:Array, values:Object, mode:String, returnInsertionIndex:Boolean = false, compareFunction:Function = null ):int
	{
		if( !compareFunction && fields && fields.length && fields[0] is SortField && SortField( fields[0] ).compareFunction )
		{
			compareFunction = SortField( fields[0] ).compareFunction;
		}
		return super.findItem( items, values, mode, returnInsertionIndex, compareFunction );
	}
}
}
		

This forces the custom Sort class onto the grid's dataProvider, and then forces the correct compareFunction from the SortField to be used by the Sort's findItem() method. Hopefully we'll get a fix for this soon, but in the meantime, maybe this workaround will help out some other folks.

Comments (3) | del.icio.us | Digg It! | Linking Blogs | 4435 Views

Comments

• # Posted By Rakhi Garg | 2/4/10 3:52 AM

  I want to sort silverlight datagrid by my own method from database. and i had bind to datagrid with datatable. So please tell me how can i sort with database

• # Posted By Brian | 2/4/10 9:03 AM

  Wrong platform, Rakhi. This is about Adobe Flex. You need to go ask on a Silverlight forum.

• # Posted By Dries | 5/9/11 3:25 AM

  Thanks, this stuff really helped me out. It's a bit silly this stuff is still bugged.
  One issue I still have is that any selection I make is gone when sorting, a problem I don't have in a datagrid which doesn't use nested properties.