13 Replies Latest reply on Nov 30, 2009 1:10 PM by ShankarFlex3

    Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default

    Yozef0 Level 1

      I've been trying to solve this for a while now:

       

       

      I have an AdvancedDatagrid which gets populated by an ArrayCollection.

       

      I ordered the ArrayCollection by date, so it shows from past to future:

       

      // Renew Adv Data Grid Sorted by Date     
      var dateSorter:SortField = new SortField();
          dateSorter.name= "date";            // sorter by date
      var dateSort:Sort = new Sort();
          dateSort.fields = [dateSorter];
                          
      newData.sort = dateSort;  // sorts the ArrayCollection - This Works fine
      newData.refresh();
      gc.source = newData;      // update the source of the GroupCollection
      
      // The Problem
      gc.refresh();             // The Adv. Datagrid gets resorted randomly.
      

       

      The thing is, if I refresh the GroupingCollection (for immediate display) After the Sorting of the ArrayCollection, the ordering of the dates in the ArrayCollection gets scrambledagain, but displays the populated AdvancedDatagrid immediately.

       

      So in sum: Create the ArrayCollection > Sorting it > Refresh the GroupingCollection > Populates the Adv.DataGrid, but the ArrayCollection is not sorted anymore.

       

      Anybody stumbled on such an obstacle before?

        • 1. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
          ShankarFlex3 Level 2

          Hi,

           

          Is the date the frist GroupingField,  try to group by Date first and see if the data is correct.

          • 2. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
            Yozef0 Level 1

            The Grouping Field is a different key:

             

            <mx:GroupingField name="name">

             

            It's grouping them by name. Though I've changed it to date, and indeed they were sorted by date. What I need is to sort them by date, but grouped by name.

             

            Would it be possible that this is a bug from Adobe? It's the groupingCollection.refresh() thats destroying the sorted ArrayCollection.

            • 3. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
              ShankarFlex3 Level 2

              Hi,

               

              I think its the normal behaviour not a bug, when you call refresh method, it applies the settings of the GroupingCollection class to the data. By default its sorting by the GroupingField.

               

              Refer to

              http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_08.html#230324

              • 4. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
                Yozef0 Level 1

                So the link states:

                 

                Calling the GroupingCollection.refresh() method

                The GroupingCollection.refresh() method applies the settings of the GroupingCollection class to the data. You must call this method any time you modify the GroupingCollection class, such as by setting the grouping, source, or summaries properties of the GroupingCollection class. You also call theGroupingCollection.refresh() method when you modify a GroupingField of the GroupingCollection class, such as by changing the caseInsensitive,compareFunction, or groupingFunction properties.

                Notice that in the previous example, the AdvancedDataGrid control calls the GroupingCollection.refresh() method in response to the initialize event of the AdvancedDataGrid control.

                 

                 

                So this precisely my case... I set the source to a new ArrayCollection, then I refreshed.

                 

                Result: The ArrayCollection Sorted randomly.

                • 5. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
                  ShankarFlex3 Level 2

                  Do you mean to say its not even sorted by the first GroupingField (name).

                  • 6. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
                    Yozef0 Level 1

                    No it is sorting by name... when:

                     

                     

                    <mx:GroupingCollection id="gc" source="{siteTrafficData}">

                            <mx:Grouping>

                              <mx:GroupingField name="name">

                                <mx:summaries>

                                  <mx:SummaryRow summaryPlacement="group">

                                <mx:fields>

                                             .....

                     

                     

                     

                    This works well... it's groups the rows by name (all those with the same name in common)... Though the source of the gc needs to change (updates), and the ArrayCollection I'm passing to the gc, which is newData is Sorted by Date (I've done so in AS3 and traced it)... It Sorts them & Everything is Fine! I can even see it in the AdvDataGrid, though, I would have to gc.source = newData; more than once for it to display... or for it to populate and render.

                     

                    This is where the gc.refresh() comes. When I gc.refresh() (so I won't need need to pass through gc.source = newData; to awaken the Adv DataGrid to render), the new Source of the gc gets populated, But Not Sorted by date.

                     

                    So the Adv.DataGrid has the right data... but to force it to refresh(), it resorts...

                    • 7. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
                      ShankarFlex3 Level 2

                      Hi,

                       

                      What I meant to say is however you sort the data, it always works by the GroupingField. I assume you are having the data sorted by name even after you have changed the source and called gc.refresh.

                       

                      You would probably need to display the date as a GroupingField, may be the first one.

                       

                      By the way how many grouping fields do you have, can you post the code.

                      • 8. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
                        Yozef0 Level 1

                        Shankar

                         

                        You have patience. I have One Grouping Field... and it's by name.

                         

                        If I comment gc.refresh() in the function where it lives, and call that function again... as in, gc.source = sortedArraCollection, it displays it in the Adv.DataGrid (after a few clicks)... Its there, sorted & grouped correctly... as in, Grouped by name, and sorted by Date.

                         

                        I would like the gc.refresh() to do what it's suppose to do. Populate the Grid and render it instantly and not clicking through the button a few times...

                         

                        Do you need me to send you the code? I am willing to do so.

                        • 10. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
                          Yozef0 Level 1

                          private function populateGrid(evt:ResultEvent):void {          // Populate By Date
                               trace("populateGrid - Full XML" + evt.result.site);
                               areaChartData.removeAll();                               // Clear Area Chart
                               for each (var node:XML in evt.result.site) {
                                    var _site:Object = new Object();
                                    var _graphData:Object = new Object();
                          
                                    _site["date"]      = node.@date;
                                    _site["id"]      = node.@id;
                                    _site["name"]      = node.@name;
                                    _site["visits"] = node.@visits;
                                    _site["absoluteUniqueVisitors"] = node.@absoluteUniqueVisitors;
                                    _site["pageViews"]           = node.@pageViews;
                                    _site["avgPageViews"]      = node.@avgPageViews;
                                    _site["timeOnSite"]          = node.@timeOnSite;
                                    _site["bounceRate"]      = node.@bounceRate;
                                    _site["newVisits"]           = node.@newVisits;
                                    _site["visitorsPerDay"] = node.@visitorsPerDay;
                                    _site["change"]           = node.@change;
                                                        
                                    _graphData["name"]      = node.@name;          // Graph Info
                                    _graphData["date"]      = node.@date;          // Graph Info
                                    _graphData["visits"] = node.@visits;        // Graph Info
                                    newData.addItem(_site);
                                    areaChartData.addItem(_graphData);
                                    }
                                              
                                    // Generating Graph ArrayCollection
                                    var timeKeyed:Object = {}
                                    for each (var datum:Object in areaChartData) {
                                         if (!(datum.date in timeKeyed)) {
                                              timeKeyed[datum.date] = { date : datum.date };
                                         }
                                         timeKeyed[datum.date][datum.name] = datum.visits;
                                    }
                                               
                                    var newAreaChartData:ArrayCollection = new ArrayCollection();
                                    for each (var _datum:Object in timeKeyed) {
                                         newAreaChartData.addItem(_datum);
                                    }
                                              
                                    areaChart.visitorsPerMonthData = newAreaChartData;     // Update AreaChart dataProvider
                                              
                                    minMaxPanel.maxmisePanel();
                                    // Renew Adv Data Grid Sorted by Date     
                                    var dateSorter:SortField = new SortField();
                                         dateSorter.name= "date";
                                    var dateSort:Sort = new Sort();
                                         dateSort.fields = [dateSorter];
                                              
                                    newData.sort = dateSort;
                                    newData.refresh(); 
                                    absUniqueColumn.visible = true;
                                    mainColumn.dataField = "date";     // Change the main column to handle Dates
                                    gc.source = newData;
                                              
                                    sites_adg.invalidateDisplayList();
                                    sites_adg.invalidateProperties();
                                              
                                    myCombo.invalidateDisplayList();
                                           myCombo.invalidateProperties();
                                           
                                           //Populate AreaChart
                                           areaChart.invalidateDisplayList();
                                           areaChart.invalidateProperties(); 
                                           
                                           gridPanel.title = "Traffic";
                                           //gc.refresh();               // CAREFULL May Re-sort as Previous but populates grid on the fly
                          }
                          

                           

                           

                          <!-- ADVANCED DATA GRID -->
                               <mx:Panel title="Traffic" id="gridPanel" layout="vertical" horizontalAlign="center" horizontalGap="0" width="100%" 
                                                dropShadowEnabled="true" shadowDirection="right" shadowDistance="4" height="100%">
                               <mx:AdvancedDataGrid id="sites_adg" height="100%" textAlign="center"
                                              folderClosedIcon="@Embed('../assets/application_go.png')" 
                                              folderOpenIcon="@Embed('../assets/application_get.png')" styleFunction="rowStyler"
                                              sortExpertMode="true" >        
                                       <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"/>
                                                          <mx:SummaryField dataField="absoluteUniqueVisitors" id="summaryAbsUV" label="absoluteUniqueVisitors" operation="AVG"/>
                                                          <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="name" headerText="Site Name" textAlign="left" width="172"/>-->
                                               <mx:AdvancedDataGridColumn dataField="date" id="mainColumn" headerText="Date" width="250" sortDescending="false" textAlign="left"/> <!-- w: 78 -->
                                               <mx:AdvancedDataGridColumn dataField="visits" headerText="Visits #" labelFunction="visitsFunc" width="83"/>
                                               <mx:AdvancedDataGridColumn dataField="change" headerText="% Change" itemRenderer="ChangeGrid" labelFunction="changeFunc" fontWeight="bold" width="88"/>
                                               <mx:AdvancedDataGridColumn dataField="absoluteUniqueVisitors" id="absUniqueColumn" headerText="Abs. Unique Visitors" labelFunction="auvFunc" width="149"/>
                                               <mx:AdvancedDataGridColumn dataField="pageViews" headerText="Page Views" labelFunction="pageVewsFunc" width="103"/>
                                               <mx:AdvancedDataGridColumn dataField="avgPageViews" headerText="Avg. Page Views" labelFunction="avgPageViewFunc" width="129"/>
                                               <mx:AdvancedDataGridColumn dataField="timeOnSite" headerText="Time on Site" labelFunction="convertSecToTimeFormat" width="119"/>
                                               <mx:AdvancedDataGridColumn dataField="bounceRate" headerText="Bounce Rate" labelFunction="bounceFunc" width="105"/>
                                               <mx:AdvancedDataGridColumn dataField="newVisits" headerText="New Visits" labelFunction="newVisitsFunc" width="93"/>
                                               <mx:AdvancedDataGridColumn dataField="visitorsPerDay" headerText="Visitors Per Day"  labelFunction="visitorsDayFunc" width="137"/>
                                           </mx:columns>
                                      </mx:AdvancedDataGrid> 
                                   </mx:Panel>
                          

                          • 11. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
                            ShankarFlex3 Level 2

                            Hi,

                             

                            I was looking at the API and upon reading SortField, it sorts only either by String or numeric. You need to set the numeric property to true for it to consider sorting by numbers.

                             

                            Now in your case the date is considered as String and I think that's the reason its not sorting in expected way.  I think you need to provide a compareFunction and use it.  Either use the compareFunction property at SortField level or Sort object level.  Just a hint for sorting, convert the date values into numeric for comparision in the function.

                             

                            Hope this helps.

                             

                            -Shankar.

                            • 12. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
                              Yozef0 Level 1

                              ShankarFlex3,

                               

                                  Please beleive me when I say the sorting is Not the problem. It displays it beautifully Grouped by name, and sorted by Date. It is the GroupCollection.refresh(). When I keep everything as is (without the gc.refresh()) everything is displayed in a sorted way and by group name. But takes longer to display on screen (render or populate). I would have to click that functionality more than once.

                               

                              It's only when I gc.refresh() [used so I wouldn't have to click the button several times] that the grid gets displayed quickly (Very Good) but resorted randomly in the grid (Very Bad).

                               

                              I created a bug for this: https://bugs.adobe.com/jira/browse/SDK-24423

                              • 13. Re: Refreshing a Sorted arrayCollection in GroupColumn in Adv.DataGrid get back to default
                                ShankarFlex3 Level 2

                                Hi,

                                 

                                I believe you, it could be a bug lets wait and see...

                                 

                                 

                                -Shankar.