Skip to content

Sorting an Advanced DataGrid with Grouping Collection

December 15, 2009

This took a while for me to solve. I wanted to group my rows by name and sorted by date for each group collection. Much thanks to Sameer Bhatt as he deserves the credit for finding this clean solution.
So I have an ArrayCollection:

[Bindable] private var siteTrafficData:Array = [ // dummy data
{absoluteUniqueVisitors:"164630", avgPageViews:"2.5900", bounceRate:"29.4400", change:"0", date:"2009-12-07", id:"972900", name:"www.site1.com", newVisits:"51.9800", pageViews:"480718", timeOnSite:"216.4000", visitorsPerDay:"195716", visits:"158716"},
{absoluteUniqueVisitors:"166841", avgPageViews:"2.5400", bounceRate:"29.0600", change:"1.85", date:"2009-12-09", id:"972940", name:"www.site1.com", newVisits:"52.0600", pageViews:"480913", timeOnSite:"211.3900", visitorsPerDay:"189674", visits:"189224"},
{absoluteUniqueVisitors:"166841", avgPageViews:"2.5400", bounceRate:"29.0600", change:"1.85", date:"2009-12-05", id:"972960", name:"www.site1.com", newVisits:"52.0600", pageViews:"468544", timeOnSite:"216.4520", visitorsPerDay:"289224", visits:"219734"}];

An Advanced DataGrid which groups the rows by the name.

<mx:AdvancedDataGrid id="adv_dg" height="80%" width="80%" textAlign="center">
   <mx:dataProvider>
      <mx:GroupingCollection id="gc" source="{siteTrafficData}">
         <mx:Grouping>
            <mx:GroupingField name="name">
               <mx:summaries>
                   <mx:SummaryRow summaryPlacement="group">
                       <mx:fields>
                           <mx:SummaryField dataField="visits" id="summaryVisits" label="visits" operation="{operation}"/>
                           <mx:SummaryField dataField="change" id="summaryChange" label="change" operation="{operation}"/>
                           <mx:SummaryField dataField="absoluteUniqueVisitors" id="summaryAbsUV" label="absoluteUniqueVisitors" operation="{operation}"/>
                           <mx:SummaryField dataField="pageViews" id="summaryPageViews" label="pageViews" operation="{operation}"/>
                           <mx:SummaryField dataField="avgPageViews" id="summaryAVGPageViews" label="avgPageViews" operation="AVG"/>
                           <mx:SummaryField dataField="timeOnSite" id="timeOnSite" label="timeOnSite" operation="AVG"/>
                           <mx:SummaryField dataField="bounceRate" id="summaryBounceRate" label="bounceRate" operation="AVG"/>
                           <mx:SummaryField dataField="newVisits" id="summaryNewVisits" label="newVisits" operation="AVG"/>
                           <mx:SummaryField dataField="visitorsPerDay" id="summaryVisPerDay" label="visitorsPerDay" operation="AVG"/>
                      </mx:fields>
                   </mx:SummaryRow>
               </mx:summaries>
            </mx:GroupingField>
        </mx:Grouping>
      </mx:GroupingCollection>
   </mx:dataProvider>
     <mx:columns>
      <mx:AdvancedDataGridColumn dataField="date" headerText="Date"/>
      <mx:AdvancedDataGridColumn dataField="visits" headerText="Visits #"/>
      <mx:AdvancedDataGridColumn dataField="change" headerText="% Change" fontWeight="bold"/>
      <mx:AdvancedDataGridColumn dataField="absoluteUniqueVisitors" headerText="Abs. Unique Visitors"/>
      <mx:AdvancedDataGridColumn dataField="pageViews" headerText="Page Views" />
      <mx:AdvancedDataGridColumn dataField="avgPageViews" headerText="Avg. Page Views" />
      <mx:AdvancedDataGridColumn dataField="timeOnSite" headerText="Time on Site"/>
      <mx:AdvancedDataGridColumn dataField="bounceRate" headerText="Bounce Rate"/>
      <mx:AdvancedDataGridColumn dataField="newVisits" headerText="New Visits"/>
      <mx:AdvancedDataGridColumn dataField="visitorsPerDay" headerText="Visitors Per Day"/>
     </mx:columns>
</mx:AdvancedDataGrid>

Now for the Sorting by date – the Magic:

private function populateGrid():void {
   gc.source = siteTrafficData;
   gc.refresh(); 

   adv_dg.validateNow();

   var sort:Sort = new Sort();
       sort.fields = [new SortField("date")];
   IHierarchicalCollectionView(adv_dg.dataProvider).sort = sort;
   IHierarchicalCollectionView(adv_dg.dataProvider).refresh();
}
Advertisements

From → AIR, Uncategorized

7 Comments
  1. Thanks for this trickery. It does indeed work. I was sorting my ArrayCollection saw that it was correctly sorted, but my AdvancedDataGrid was not. Using your code, I simply added the same sort instance to the IHierarchicalCollectionView sort method and everything sorted. Thanks!

    PS – to note for others you of course need to import the Interface which is here:
    import mx.collections.IHierarchicalCollectionView;

  2. Thanks! Very helpful, worked great and is a much cleaner solution than my previous work-around.
    Note: Also need to import mx.collections.Sort and mx.collections.Sortfield

  3. mousator permalink

    Thx! very nice and helpful solution.

  4. Anonymous permalink

    Thankyou verymuch for your help.it magically worked for me.

  5. Shravan permalink

    Thank you very much for your helpful and clean solution.

    but here i have a issue, when i done after this, the column is still showing the number and down arrow, is there anyway to get rid of those 2 things. I already used sortExpertMode=”true”, but no luck, because sortexportmode is occuring before sort applies. can anyone help me in this issue??

  6. choty permalink

    Thanks a million for posting this solution!!

  7. Ago permalink

    lifesaver… thank you 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: