HierarchicalCollectionView: One time sort? - apache-flex

I have an AdvancedDataGrid that relies on a HierarchicalCollectionView as it's dataProvider. What I'd like to do is sort the data when it is first loaded, but then disable the sort so that anything that is added after the initial load doesn't cause the grid to auto-sort again. I tried something like this:
this._myDataProvider = new HierarchicalCollectionView(
new HierarchicalData(this._model.rootTasks));
var mySort:Sort = new Sort();
mySort.fields = [new SortField("startDate")];
this._tasksDataProvider.sort = taskSorting;
this._tasksDataProvider.refresh();
this._tasksDataProvider.sort = null;
But setting the sort to null just leaves the data unsorted. I guess what I'm asking is: how can I sort the underlying hierarchical data since it seems setting the sort property will keep it dynamically sorting. Thanks for any help you can provide.

Personally, I would change the sort order when you're getting the data. Either it's done on the server side or when you parse the data (ie. in your model). You can do a one time sort using Array with sortOn.

you can
1. sort the original data with sort function,
2. clone content and put it to a new collection with no sort (be careful do and make a manual clone),
3. just use the new data collection.

I had the same kind of problem until I realized that the sorting with Sort object does not change the "physical" ordering of the items within the Collection, so when you remove the Sort, the next refresh reverts the view to the actual "physical" ordering.
Similarily as stated above, I solved by it by cloning the sub-collections into sorted order this way:
public static function buildPositionSort():Sort
{
var dataSortField:SortField = new SortField();
dataSortField.name = "position";
dataSortField.numeric = true;
dataSortField.descending = false;
var sort:Sort = new Sort();
sort.fields = [ dataSortField ];
return sort;
}
/**
* This method is used to create a clone of ArrayCollection, because sorting does not
* actually change the physical ordering of the items.
*/
public static function createSortedArrayCollectionCopy(source:ArrayCollection):ArrayCollection
{
var target:ArrayCollection = new ArrayCollection();
source.sort = buildPositionSort();
source.refresh();
for each (var item:Object in source)
{
if (item.children != null) item.children = createSortedArrayCollectionCopy(item.children);
target.addItem(item);
}
return target;
}

Related

Flex 4.6 Custom Sorting of list

So my problem seems to be simple but for the love of god i cant figure it out. So i am asking for your help. I have a simple list in a mobile application containing shops. I want to short them by distance from the center of my map.
It seems like i need a custom sorting function but im not sure on whati have to do in it.
i am using
testDist.setLatLng(propertyList.selectedItem.lat,propertyList.selectedItem.lng);
dist.text=""+GeodesicCalculatorUtil.calculateGeodesicDistance(FlexGlobals.topLevelApplication.currentLatLng2,testDist,DistanceUnits.KILOMETERS)
to get the distance for a shop and i have to compare it with the next one. however i cant figure out how to do it in the comparing function. I would be glad if anyone can help me.
As this seems to be a common problem for people using MapQuest as their mapping system, i provide my solution for sorting the custom POIs by distance to any list. This is a solution for mobile applications and this is the reason im using lists over datagrid.
protected function sort_clickHandler():void
{
var dataSortField:SortField = new SortField();
dataSortField.numeric = true;
/* Create the Sort object and add the SortField object created earlier to the array of fields to sort on. */
var numericDataSort:Sort = new Sort();
numericDataSort.compareFunction=sortFunction;
/* Set the ArrayCollection object's sort property to our custom sort, and refresh the ArrayCollection. */
getAllMarkersResult.lastResult.sort = numericDataSort;
getAllMarkersResult.lastResult.refresh();
}
private function sortFunction(a:Object, b:Object, array:Array = null):int
{
var aPoi:LatLng = new LatLng(a.lat,a.lng);
var bPoi:LatLng = new LatLng(b.lat,b.lng);
var i:Number=GeodesicCalculatorUtil.calculateGeodesicDistance(FlexGlobals.topLevelApplication.currentLatLng2,aPoi,DistanceUnits.KILOMETERS);
var j:Number=GeodesicCalculatorUtil.calculateGeodesicDistance(FlexGlobals.topLevelApplication.currentLatLng2,bPoi,DistanceUnits.KILOMETERS);
return ObjectUtil.numericCompare(i, j);
}

Sort collection and sort remains in place when adding to collection?

When I get a collection back from the service tier, I create an ArrayCollection and apply a sort. When I add an item to the collection later on, the sort is still in place? It seems to be the case. I thought I was only sorting it once, not applying a sort that will stick???
Here is the method for adding an item:
private function onAddNewClick():void
{
var fileTemplate:FileTemplateDetailDTO = new FileTemplateDetailDTO();
fileTemplate.fileTemplateId = 0;
fileTemplate.fileTmpltDtlId = 0;
fileTemplate.createdBy = appModel.userName;
newFieldsDp.addItem( fileTemplate );
this.fieldsGridEmpty.rowCount = newFieldsDp.length + 1;
totalCount = newFieldsDp.length;
this.fieldsGridEmpty.scrollToIndex( totalCount );
}
And here is what I'm trying now for when the data comes back from the service:
for each( var dto:FileTemplateCompositeDTO in coll ){
dto.templateHistory = createHistoryColl( dto.details );
var sortedArray:ArrayCollection = sortDetails( dto.details );
sortedArray.sort = null;
var freshArray:Array = sortedArray.toArray();
dto.details.source = freshArray;
model.fileTemplateComposites.addItem( FileTemplateCompositeDTO( dto ) );
}
Easiest way to do a one time sort:
var array:Array = yourArrayCollection.toArray():
array.sortOn("SomePropertyAvailableInEachItem", Array.DESCENDING | Array.NUMERIC);
yourArrayCollection.refresh();
Since you're not sorting the underlying Array, and not the collection.
No. You should call myCollection.refresh() every time it is changed. But you can listen for collectionChange event and call refresh from there:
private function collectionChangeHandler(event:CollectionEvent):void
{
if (event.kind == CollectionEventKind.ADD || event.kind == CollectionEventKind.REMOVE ||
event.kind == CollectionEventKind.REPLACE || event.kind == CollectionEventKind.MOVE || event.kind == CollectionEventKind.UPDATE)
{
ArrayCollection(event.currentTarget).refresh();
}
}
The sort of an ArrayCollection will remain linked to it. You can try to set the sort attribute to null after the initial sort and refresh, but I'm not 100% sure that a following refresh() will keep the elements order (although it should).
Another approach: after applying the initial sort to your collection, you can call its toArray() method to obtain a (sorted) array, then just create a new ArrayCollection passing that array as its source in the constructor. Note that ArrayCollection is really just a wrapper on array, so the toArray() and the construction of a new ArrayCollection for an existing array should not be heavy operations.
A Sort on an ArrayCollection is an object itself. When you assign the Sort object to the sort property on the ArrayCollection, it remains assigned until you remove it manually. To remove it, just set the sort property on your ArrayCollection to null after you call refresh().
myArrayCollection.sort = mySort;
myArrayCollection.refresh();
myArrayCollection.sort = null;
Now any time you call refresh() on the ArrayCollection, the sort is no longer in place.

How to sort AdvancedDataGrid with hierarchical data?

I have an AdvancedDataGrid with a HierarchicalCollectionView as its dataProvider. When I view the grid with the dataset I'm working with, and click the header of the column I wish to sort on, everything works perfectly. It sorts it hierarchically exactly how I would expect it to.
What I want to do now is have the grid already be sorted when it is shown to the user. Is there a way to do this programatically? I can't for the life of me figure out how to do this, and clearly it's possible since the AdvancedDataGrid has this built in.
Edit - BTW, I've tried this:
var myData:HierarchicalCollectionView = new HierarchicalCollectionView(theDataSource);
// Works fine using only the line above and clicking the header to sort.
// This is the part that I tried adding:
var sort:Sort = new Sort();
sort.fields = [new SortField("startDate")];
myData.sort = sort;
myData.refresh();
This appears to do something as far as sorting goes, but it doesn't sort it in the same way as clicking the column header. "startDate" is a property of an object in theDataSource by the way.
Looks like you want to sort dates. Sort can't do that out of the box. You have to use a compareFunction.
If your objects are of type Date it's quite easy:
var sortField:SortField = new SortField("startDate");
sortField.compareFunction = ObjectUtil.dateCompare;
In case your column contains dates as strings you'll have to parse them first (code example from http://blog.flexexamples.com/2007/08/12/sorting-date-columns-in-a-datagrid/):
private function date_sortCompareFunc(itemA:Object, itemB:Object):int
{
/* Date.parse() returns an int, but
ObjectUtil.dateCompare() expects two
Date objects, so convert String to
int to Date. */
var dateA:Date = new Date(Date.parse(itemA));
var dateB:Date = new Date(Date.parse(itemB));
return ObjectUtil.dateCompare(dateA, dateB);
}
var sortField:SortField = new SortField("startDate");
sortField.compareFunction = date_sortCompareFunc;
Then just use the sortField like you did in your example. That should work fine.
You can create a new advanced data grid sort event and dispatch it on the grid after the hierarchical data is set on it (unfortunately I've had to use a callLater to give the grid time to deal with the collection internally it seems assignments to the dataProvider of the ADG are sometimes asynchronous)
var advancedDataGridEvent : AdvancedDataGridEvent = new AdvancedDataGridEvent(AdvancedDataGridEvent.SORT, false, true);
advancedDataGridEvent.columnIndex = columnIndex;
advancedDataGridEvent.dataField = dataField;
dispatchEvent(advancedDataGridEvent);
This code is from an extension of ADG so you would want the dispatchEvent to actually be on your instance of the grid if you're not creating an extension.
Also a note from the code:
//setting sortDescending=true on a column does not work as expected. so, until a solution
//is found, this works just as well. the event that is dispatch just tells the column
//to reset. so, one resorts ascending (the default), while a second resorts descending.
//however, this second is only dispatched if defaultSortDesc is true on the grid.
if (defaultSortDesc)
{
dispatchEvent(advancedDataGridEvent);
}
It dispatches the event twice to flip the sort.

Flex Advanced Data Grid w/ hierarchical data: How to access currentTarget fields on dragdrop event?

So this is driving me crazy. I've got an advanced data grid with a dataprovider that's an array collection w/ hierarchical data. Each object (including the children) has an id field. I'm trying to drag and drop data from within the ADG. When this happens, I need to grab the id off the drop target and change the dragged object's parentid field. Here's what I've got:
public function topAccountsGrid_dragDropHandler(event:DragEvent):void{
//In this function, you need to make the move, update the field in salesforce, and refresh the salesforce data...
if(checkActivateAccountManageMode.selected == true) {
var dragObj:Array = event.dragSource.dataForFormat("treeDataGridItems") as Array;
var newParentId:String = event.currentTarget['Id'];
dragObj[0].ParentId = newParentId;
} else {
return;
}
app.wrapper.save(dragObj[0],
new mx.rpc.Responder(
function():void {
refreshData();
},
function():void{_status = "apex error!";}
)
);
}
I can access the data I'm draggin (hence changing parentId) but not the currentTarget. I think the hierarchical data is part of the problem, but I can't find much in the documentation? Any thoughts?
event.currentTarget is not a node, it's the ADG itself. However, it's quite easy to get the information you want, since the ADG stores that data internally (as mx_internal).
I'm using the following code snippets (tested with Flex SDK 4.1) in a dragOver handler, but I guess it will work in a dragDrop handler too.
protected function myGrid_dragDropHandler(event:DragEvent):void
{
// Get the dragged items. This could either be an Array, a Vector or NULL.
var draggedItems:Object = getDraggedItems(event.dragSource);
if (!draggedItems)
return;
// That's our ADG where the event handler is registered.
var dropTarget:AdvancedDataGrid = AdvancedDataGrid(event.currentTarget);
// Get the internal information about the dropTarget from the ADG.
var dropData:Object = mx_internal::dropTarget._dropData;
// In case the dataProvider is hierarchical, get the internal hierarchicalData aka rootModel.
var hierarchicalData:IHierarchicalData = dropTarget.mx_internal::_rootModel;
var targetParent:Object = null;
// If it's a hierarchical data structure and the dropData could be retrieved
// then get the parent node to which the draggedItems are going to be added.
if (hierarchicalData && dropData)
targetParent = dropData.parent;
for each (var draggedItem:Object in draggedItems)
{
// do something with the draggedItem
}
}
protected function getDraggedItems(dragSource:DragSource):Object
{
if (dragSource.hasFormat("treeDataGridItems"))
return dragSource.dataForFormat("treeDataGridItems") as Array;
if (dragSource.hasFormat("items"))
return dragSource.dataForFormat("items") as Array;
if (dragSource.hasFormat("itemsByIndex"))
return dragSource.dataForFormat("itemsByIndex") as Vector.<Object>;
return null;
}
var dropData:Object = mx_internal::dropTarget._dropData;
should be
var dropData:Object = dropTarget.mx_internal::_dropData;
Try this.

ArrayCollection removing sort

After applying a numeric sort to my dataprovider(Array Collection), I can not reorder the items via a tilelist. Do I need to remove the sort from the arrayCollection. If so, is it just a case of setting collection.sort = null ?
var sortField:SortField=new SortField();
sortField.name="order";
sortField.numeric=true;
var sort:Sort=new Sort();
sort.fields=[sortField];
Setting the sort to null should indeed remove the sort for the collection. You might need to do an optional refresh().
I got caught with this problem too, I found your question, and I still didnt get it solved like Christophe suggested.
After suffering with this for a while, I discovered one way to avoid the problems you mentioned.
Simply use an auxiliary ArrayCollection to do the sort. Anyway your Sort instance seems to be temporary (you want to through it away), so why not use a temporary ArrayCollection?
Here's how my code looked like:
// myArrayCollection is the one to sort
// Create the sorter
var alphabeticSort:ISort = new Sort();
var sortfieldFirstName:ISortField = new SortField("firstName",true);
var sortfieldLastName:ISortField = new SortField("lastName",true);
alphabeticSort.fields = [sortfieldFirstName, sortfieldLastName];
// Copy myArrayCollection to aux
var aux:ArrayCollection = new ArrayCollection();
while (myArrayCollection.length > 0) {
aux.addItem(myArrayCollection.removeItemAt(0));
}
// Sort the aux
var previousSort:ISort = aux.sort;
aux.sort = alphabeticSort;
aux.refresh();
aux.sort = previousSort;
// Copy aux to myArrayCollection
var auxLength:int = aux.length;
while (auxLength > 0) {
myArrayCollection.addItemAt(aux.removeItemAt(auxLength - 1), 0);
auxLength--;
}
It's not the neatest code, it has some weird hacks like auxLength instead of aux.length (this one gave me -1 array range exception), but at least it solved my problem.
Source
Adobe Flex - Sorting an ArrayCollection by Date
/**
* #params data:Array
* #return dataCollection:Array
**/
private function orderByPeriod(data:Array):Array
{
var dataCollection:ArrayCollection = new ArrayCollection(data);//Convert Array to ArrayCollection to perform sort function
var dataSortField:SortField = new SortField();
dataSortField.name = "period"; //Assign the sort field to the field that holds the date string
var numericDataSort:Sort = new Sort();
numericDataSort.fields = [dataSortField];
dataCollection.sort = numericDataSort;
dataCollection.refresh();
return dataCollection.toArray();
}

Resources