Skip navigation
FinFlex
Currently Being Moderated

Server side sorting

Mar 27, 2012 2:17 AM

Tags: #sort #advanceddatagrid #arraycollection #server-side

I have datagrid with paged data. When I click the AdvancedDataGrid column header, datagrid existing data will be sorted. This isn't right because I need to get sorted data from the server. I have tried to catch columnHeaderRelease and click methods to retrieve sorted columns.

If i want to disable internal sort, i need to call event.preventDefault().  This works but sorting icons wont work anymore.

 

I extended ArrayCollection to get sortFields and sort, and disabled datagrid refresh() method. Like this i can catch sortfields but somehow setter value is null with.

 

 

public class CustomSortCollection extends ArrayCollection
{
                    private var _sort:ISort;
  
                    public function CustomSortCollection(source:Array = null)
                    {
                              super();
  
                              this.source = source;
                    }


                    override public function get sort():ISort
                    {
                              return _sort;
                    }


                    override public function set sort(s:ISort):void
                    {
                              _sort = s;
                              if (!s)
                                        return;
  
                              trace(s.fields.length);
  
                              var event:CustomSortCollectionEvent = new CustomSortCollectionEvent(CustomSortCollectionEvent.SORT);
                              event.fields = s.fields;
                              event.s = s;
                              this.dispatchEvent(event);
                    }
  
                    /**
                     * Avoid the internal sorting implementation, with this it's possible
                     * to do a server side sort.
                     *
                     * @return true
                     */
                    override public function refresh():Boolean
                    {
                              return true;
                    }
  
                    public function superRefresh():Boolean
                    {
                              return super.refresh();
                    }
          }

Any suggestions on this.

 
Replies
  • Currently Being Moderated
    Mar 29, 2012 7:54 AM   in reply to FinFlex

    There really is not a good way to handle this with event intercepts, at least not that I've been able to find. The simplest soultion is to create a custom component that extends the spark DataGrid. The key is to override the 'columnHeaderGroup_clickHandler()' method so that it dispatches a custom event that triggers your server side sort. You will also need to create a class that wraps your actual results (whatever would normally be bound to dataprovider). It will also have some properties that are used by the datagrid to determine what visual changes it needs to make once your server side sort has returned the results. At a bare minimum I would include fields for sort direction, sort column, and the results collection. The idea is to have your service method return an instance of this 'PageableCollection' to the client which passes it along to your datagrid. The datagrid then sees the change to its instance of 'PageableCollection' and updates it's view.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2012 8:07 AM   in reply to bucpatr1

    Here is an example:

     

    import spark.components.gridClasses.GridColumn;

    import spark.events.GridEvent;

     

        [Event(name="sortChanged", type="com.myproject.myevents.SortEvent")]

        public class ExtendedDataGrid extends DataGrid

        {

            private var _pageable:PageableList;

     

            public static const PAGEABLE_CHANGED:String="pageableChanged";

     

            public function ExtendedDataGrid()

            {

                super();

            }

     

            override protected function columnHeaderGroup_clickHandler(event:GridEvent):void

            {

                const column:GridColumn=event.column;

                initiateRemoteSort(column);

            }

     

            public function initiateRemoteSort(column:GridColumn):void

            {

                if (!enabled || !sortableColumns || !column || !column.sortable)

                    return;

                clearSelection();

                if (_pageable)

                {

                    _pageable.sortAsc=!_pageable.sortAsc

                    _pageable.sortBy=column.dataField;

                }

                var sortEvent:SortEvent=new SortEvent(SortEvent.SORT_CHANGED, true, false, column.sortDescending, column.dataField);

                dispatchEvent(sortEvent);

            }

     

            public static function findColumnByDataField(columns:IList, dataField:String):GridColumn

            {

                for (var i:int=0; i < columns.length; i++)

                {

                    var col:GridColumn=GridColumn(columns.getItemAt(i));

                    if (col.dataField != null && col.dataField == dataField)

                    {

                        return col;

                    }

                }

                return null;

            }

     

            [Bindable("pageableChanged")]

            public function get pageable():PageableList

            {

                return _pageable;

            }

     

            public function set pageable(value:PageableList):void

            {

                _pageable=value;

                clearSelection();

                this.dataProvider=value.values;

                var col:GridColumn=findColumnByDataField(columns, value.sortBy);

                if (col != null)

                {

                    col.sortDescending=!value.sortAsc;

                    if (columnHeaderGroup)

                    {

                        const columnIndices:Vector.<int>=Vector.<int>([col.columnIndex]);

                        columnHeaderGroup.visibleSortIndicatorIndices=columnIndices;

                    }

                }

                dispatchEvent(new SortEvent(PAGEABLE_CHANGED, true, false, value.sortAsc, value.sortBy));

            }

        }

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 26, 2012 10:41 AM   in reply to FinFlex

    If you can consider a third party component, we've already implemented this : http://www.flexicious.com/Home/DemoFlex4

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points