Flex: Keeping the sort on a datagrid when you change the dataProvider

26 06 2008

Well, there’s a few things you have to dig out a little when it comes to working with the more useful datagrid events.

Say you want to extend the DataGrid into your own component. You want to know when the dataProvider has been changed, and you’d like the new data to be sorted by the previous sort.

The events are as follows:

First, when a dataProvider is changed, the DataGrid instance will fire an mx.events.CollectionEvent.COLLECTION_CHANGE event.

EG:

dataGrid.addEventListener(mx.events.CollectionEvent.COLLECTION_CHANGE, onDataGridDataChange, false, 0, true);

NOTE: Those extra parameters in the attached listener create a “weak reference”. This is to prevent memory leaks.

This signifies that the dataProvider has been changed (should check the “kind” property to ensure it is equal to CollectionEventKind.RESET).

Second, the actual dataProvider itself will fire a COLLECTION_CHANGE itself after it is sorted. In the datagrid listener, you can attach the listener to the dataProvider. When a column heading is clicked, the datagrid will do the sort then call a “refresh()” which will dispatch a CollectionEvent of kind CollectionEventKind.REFRESH.

EG.

private var currentSort:mx.collections.Sort;
private function onDataGridDataChange(evt:CollectionEvent):void
{

                //get the new data collection
                var ac:ArrayCollection = dataGrid.dataProvider as ArrayCollection;
                //attach the collection change event
                ac.addEventListener(CollectionEvent.COLLECTION_CHANGE, onCollectionChanged,false,0,true);

                //if a sort was in place before the data was changed, make sure you apply the sort to this new data
                if (currentSort != null)
                {
                    ac.sort = currentSort;
                    ac.refresh();
                }

}

private function onCollectionChanged(evt:CollectionEvent):void
{

	if (evt.kind == CollectionEventKind.REFRESH)
	{
		var ac:ArrayCollection = evt.currentTarget as ArrayCollection;

		currentSort = ac.sort;

	}

}
Advertisements

Actions

Information

10 responses

26 09 2008
dirtbikejunkie

this worked great! thanks!

6 02 2009
Ben

Thanks Justin,

You saved me trawling through the livedocs and trying to figure this out.

Good one!

13 05 2009
Как сохранить сортировку в DataGrid при изменении DataProvider (Flex) на Flex Примеры, Adobe Flex, Флекс

[…] Оригинал решения « Как убрать разделитель в заголовке DataGrid (Flex) […]

11 07 2009
Aaron Pedersen

Thanks for the great write up! For my case I was updating existing data so I needed to keeping track of the selectedItem before the dataProvider was assigned. Once assigned and sorted via the onDataGridDataChange method, I looped over the new sorted array and matched the data from my oldSelectedItem and found the new selected item and set that as the grid’s selectedItem.
if(_oldSelectedItem) {
var newStyles:Array = ModelLocator.inspectorModel.currentElement.styles;
var len:uint = newStyles.length;
for(var i:uint;i < len;i++) {
var styleDescriptor:StyleDescriptor = newStyles[i] as StyleDescriptor;

if(styleDescriptor.name == _oldSelectedItem.name) {
grid.selectedItem = styleDescriptor;

grid.scrollToIndex(grid.selectedIndex);
break;
}
}
_oldSelectedItem = null;

}

7 08 2009
Allen G.

nice. this worked great. thanks!

5 08 2010
B

Spot on!

4 11 2010
Jen

This was a great help. Thanks!

12 08 2011
dreaken667

You sir, have made my morning a whole lot better. I had to make some adjustments since I’m using an AdvancedDataGrid with HierarchialData, but this post was a tremendous shove in the right direction. Thank you.

12 08 2011
Justin J. Moses

I’m just glad a post that is over 3 years old is still useful 🙂

6 03 2012
Guillaume

Awesome, thank you, it works like a charm !

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s




%d bloggers like this: