December 4, 2007

HOWTO: Setting a custom sortItemRenderer to the AdvancedDataGrid

Filed under: HOWTO — venomeffect @ 11:18 am

“We should all do what in the long run gives us joy, even if it means sorting the laundry ”


sortItemRenderer is one of those tiny goodies that comes with the AdvancedDataGrid package; albeit hard to miss. It is a nifty venomous utility that can be customizable according to needs.

The component by default uses the AdvancedDataGridSortItemRenderer which renders the sort feature of the header.

Sweet. But now I am in my familiar break-the-code-and-do-some-shit-on-my-own mood when I use my own headerRenderer , I lose the sort display completely !

The solution here will to write either a custom sortItemRenderer or handle the default sortItemRenderer within the headerRenderer code . Here I explain how to build a custom sortItemRenderer that can be used with any customized headerRenderer.

Code explained :

The core feature to understand here is the function getIconInfo() that returns a SortInfo object . The SortInfo object contains information which is used by the sortItemRenderer to dipslay the icon and the sequence value of the sort. ( P.S. : The order of sorting can easily be specified by accessing sequenceNumber as returned by this SortInfo object.

This function makes a call to the getFieldSortInfo method of AdvancedDataGrid to retrieve the sort information.

This example code uses two icons to display ascending/descending sort as in :

var sortIcon:Class = arrowDown ? _descendingIcon : _ascendingIcon;

A simple function flips the icon based on the SortInfo value .

The output of the program will look like this :

Custom Sort

Goodies :
Here is the link to an application that uses this custom built sortRenderer

You can find the source here



  1. Thanks ….

    Comment by Akhil — March 25, 2009 @ 5:57 am | Reply

  2. thanks for ur contribution

    Comment by jyoti thakur — October 12, 2009 @ 7:50 am | Reply

  3. I tried this by using my own icon that is very smaller than your icon and default icon. But it is not removing the default icon, it actually overlapping the default one. Do you have any suggestions?

    Comment by Krishna — December 6, 2010 @ 9:32 pm | Reply

  4. This is a nice control, but the problem with it is that it eliminates the “sequence” number. That is, if you want to sort by college and secondarily by department, you just get arrows for both and not the number indicating that college is the primary sort column. The default header has this.

    Comment by PL — June 6, 2013 @ 9:01 pm | Reply

  5. Perfect – this is exactly what I need. Thank you!

    Comment by andymp — September 9, 2013 @ 10:10 pm | Reply

  6. […] white. I’ve been able to do that w/everything except the arrow icons in the AdvancedDataGrid.… has a solution, but then it kills the sort sequence number. How can I just make everything in the […]

    Pingback by Flex: Changing the colour of the sort part of an AdvancedDataGrid | Technology & Programming — November 14, 2013 @ 5:34 am | Reply

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Create a free website or blog at

%d bloggers like this: