AdvancedDataGrid Multi-column programmatic sorting

Question

Hi,

I need to to a programmatic multi column sorting on the AdvancedDataGrid. The issue is, currently I am implementing paging on my grid. So, if I sort the data, only the perticular page is being sorted. So, I need to sort the entire list by the column criteria.

I tried HeaderRelease event, but I guess it is of no use as I need to make a round trip call to the server to get the sorted data. Is there any way I can implement that. I also need to show the sort markers in the Column headers' right position, indicating the sort numbers and direction.

'll really appreciate the help

Thanks :)

Answer 1

If your data is paged, you'll have to go to the server to retrieve the data anyways. If only a portion of the data is stored client side, it might be better to just sort on the server, since only the server will have all the data.

Answer 2

You need to extend the AdvancedDataGrid and override the sortHandler

public var orderBy:String; 
override protected function sortHandler(event:AdvancedDataGridEvent):void {
     super.sortHandler(event); 
     var arry:Array = [];  
     for each(var o:SortField in collection.sort.fields){
         arry.push(o.name+' '+(o.descending?'DESC':'ASC'));     
     }
     orderBy = arry.join(',');
}

Answer 3

I think we need to extend the AdvancedDataGrid and overwrite the sortHandler. I'm doing this currently. However, I'm facing a lot of problems with multisort and sortorder. Which is normal of course, after a sort I query the database and update my dataprovider which also loses the list of sortitems...

So first sort works, but suppose I want a second sortfield, it is handled as a first sortfield again.

Does anyone have an idea how to fix this??

Thanks.

CookieOfFortune, did you actually manage to implement this with the header_release. I think it's a lot more work...

Answer 4

SORRY Guys!! Missed the inital part of the code.... Here is the right code

<:AdvancedDataGrid headerWordWrap="{allowHeaderWordWrap}"   headerRelease="sortCaseInsensitive(event)" headerHeight="{headerHt}">

    <:Script>
        <[CDATA[
            import mx.events.CollectionEvent;
                import mx.binding.utils.BindingUtils;
                import mx.collections.SortField;
                import mx.collections.Sort;
                import mx.collections.ArrayCollection;
                import mx.events.AdvancedDataGridEvent;

                private var sortOrder:Boolean = true;
                [Bindable]
                public var headerHt:int = 30;


                [Inspectable(defaultValue="true", type="Boolean", enumeration="true,false", inherit="yes")]
                [Bindable]
                public var allowHeaderWordWrap:Boolean = true;

                public function sortCaseInsensitive(event:AdvancedDataGridEvent):void{
                var genericDataProvider:Object  = this.dataProvider as Object;
                        sortOrder = !sortOrder; 
                        //genericDataProvider.sort = new Sort();
                        if(genericDataProvider.sort == null){
                                genericDataProvider.sort = new Sort();
                        } 
                        var sortField:SortField = new SortField(event.dataField,true,sortOrder);
                switch (event.dataField) {
                      case "assmtId":
                      sortField.numeric = true;
                break;

                }//switch

                //genericDataProvider.sort.fields = [sortField];
                if(genericDataProvider.sort.fields == null){
                        genericDataProvider.sort.fields = [sortField];
                }else{
                        //if dataField is not already present in sort fields array 
                        if(genericDataProvider.sort.fields.indexOf(sortField) != -1){
                                genericDataProvider.sort.fields = genericDataProvider.sort.fields.concat(sortField);
                        }
                 }
            genericDataProvider.refresh();

                 // Send custom event to server and pass the array of sort to it the server side technology will make dynamic query and return the result
                }//sortCaseInsensitive

        ]]>
<:Script>
<:AdvancedDataGrid>

Answer 5

You can also have a look at the AdvancedDataGridSortItemRenderer class. This helps to customise the sort item renderer.

Thanks, Shameer

Answer 6

Try modifiyng the event priority of the sort event, no need to override the sort handler, but can't be done in mxml.

protected function dataGrid_initializeHandler(event:FlexEvent):void {
    dataGrid.addEventListener(AdvancedDataGridEvent.SORT, dataGrid_sortHandler, false, -50);
}

protected function dataGrid_sortHandler(event:FlexEvent):void {
    dataGrid.dataProvider.sort; // now up to date!
}


<mx:AdvancedDataGrid id="dataGrid" initialize="dataGrid_initializeHandler(event)" dataProvider="{model.dataProvider}" />