4 Replies Latest reply on Nov 26, 2012 10:41 AM by Flexicious

    Server side sorting

    FinFlex Level 1

      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.

        • 1. Re: Server side sorting
          bucpatr1 Level 2

          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.

          • 2. Re: Server side sorting
            bucpatr1 Level 2

            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));

                    }

                }

            • 3. Re: Server side sorting
              FinFlex Level 1

              How could i Do this with AdvancedDataGrid. Spark DataGrid and AdvancedDataGrids are totally different implementations.

              • 4. Re: Server side sorting
                Flexicious Level 1

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