1 Reply Latest reply on Aug 20, 2013 3:53 PM by Aaron Beall

    DataGrid secondary sort?

    Aaron Beall Level 3

      I'm using a Spark DataGrid and having a hard time figuring out how I can make the sorting apply secondary sort fields. For example, consider this data set:


      Name(String) | Value(Number)


      Alfa | 1

      Bravo | 1

      Charlie | 1

      Delta | 1


      If the user sorts on Value, I want the Name to be sorting alphabetically (asc/desc is not critical) -- right now it comes out quite randomly.


      I also want this to work with BOTH user initiated header-sort clicks AND programmatically setting the sort based on a primary sort field and order input.


      What's the best way to go about doing this?


      My fail attempts include (I listen for SORT_CHANGE for user sorting and re-apply a sort which includes secondary columns):


      1. Using sortByColumns() -- this had multiple issues I couldn't work around: sort order seems to be reversed from what you specify if the column is already being sorted, and it would display arrows on ALL headers, not just the primary sort header.

      2. Setting the .sort property on the dataProvider ArrayCollection -- this *almost* worked, it just doesn't show the sort arrow indicator in the header when applied programatically. Is there a way to fix this?


      Or is there a more straight-forward way?




        • 1. Re: DataGrid secondary sort?
          Aaron Beall Level 3

          I figured it out: I used method 2 and manually set the visible sort indicator arrow by setting DataGrid/columnHeaderGroup.visibleSortIndicatorIndices after I sort the array collection. So my final sorting logic is like this:


          private function updateSort(fieldName:String, descending:Boolean):void {
              if (!this.dataProvider)
              // create the primary sort
              var sort:Sort = new Sort();
              var field:SortField = new SortField(fieldName, false, descending);
              sort.fields = [field];
              // create the secondary sort fields
              var secondaryFields:Vector.<String> = this.secondarySortFields;
              for(var i:int = 0; i < secondaryFields.length; i++){
                  if(secondaryFields[i] != fieldName){
                      sort.fields.push(new SortField(secondaryFields[i]));
              // apply the sort
              ArrayCollection(this.dataProvider).sort = sort;
              // show the sort arrow on the primary sort (Flex doesn't display a sort arrow by default when there are multiple sort fields)
              this.columnHeaderGroup.visibleSortIndicatorIndices = new <int>[this.getColumnIndex(fieldName)];
          protected function get secondarySortFields():Vector.<String> {
                  return null
              var fields:Vector.<String> = new <String>[];
              for(var i:int = 0; i < this.columns.length; i++){
                  var column:GridColumn = this.columns.getItemAt(i) as GridColumn;
              return fields;


          And I enforce the secondary sort fields on user header click by listening for sort change:



          private function handleGridSortChanged(e:GridSortEvent):void {
              var primarySortField:ISortField = e.newSortFields[0];
              this.updateSort(primarySortField.name, primarySortField.descending);