7 Replies Latest reply on Oct 15, 2009 11:22 AM by Handycam

    Sorting  in a grouped advanced datagrid?

    Handycam Level 1

      How does one sort:

       

      a) the grouping categories

       

      mine are in alpha order but I need an order based on another data attribute.  For example, I have data such as:

      <instruction time="45 Minutes Before" order="1" txt="Heat oven to 450°F for the Bacon-Wrapped Scallops." />

      <instruction time="15 Minutes Before" order="2" txt="Heat oven to 450°F for the Bacon-Wrapped Scallops." />

       

      The grouping field is @time, but then they then sort with 15 minutes first, so I put in the "order" attribute.  How do I sort by that instead, while still grouping by @time?

       


      b) the "leaves"?

       

      If I have a grouping collection like:

       

      Produce

          Apples

         Oranges

         Bananas

       

      How do I sort the fruit names?

        • 1. Re: Sorting  in a grouped advanced datagrid?
          Sameer Bhatt Adobe Employee

          If you set Grouping.label to the same value as the dataField of the column in which the particular Grouped data is shown, then clicking on the header will sort the whole data automatically.

          Also, you can create your own compareFunctions to provide a custom sort.

           

          -Sameer

          • 2. Re: Sorting  in a grouped advanced datagrid?
            Handycam Level 1

            Thanks.  I want the items to be sorted automatically.  I am hiding the headers; I do not want to give the user sorting ability.

             

            My main problem is that the group headers sort alphabetically; I need a way for them to appear in a specific order -- which is either unsorted and hard-coded by me or based on a field not displayed to the user.

            • 3. Re: Sorting  in a grouped advanced datagrid?
              Sameer Bhatt Adobe Employee

              Try this -

               

                        // create a new sort with a custom compare function

                        var s:Sort = new Sort();

                        s.fields = [new SortField("name")];

                        s.compareFunction = compareFunc;

                                   

                        // assign the sort to the grid's dataProvider and call refresh

                        adg.dataProvider.sort = s;

                        adg.dataProvider.refresh();

               

              Now, you can implement the compareFunction and provide a custom compare.

               

              Call this code when the grouping is done and the GroupingCollection is assigned to the grid.

               

              -Sameer

              • 4. Re: Sorting  in a grouped advanced datagrid?
                Handycam Level 1

                This does not work...

                scheduleListCollection = new XMLListCollection(scheduleList..instruction);
                scheduleGrouped = new GroupingCollection2();
                scheduleGrouped.source = scheduleList..instruction;
                var groupingInst:Grouping = new Grouping();
                groupingInst.fields = [new GroupingField("@time")];
                scheduleGrouped.grouping = groupingInst;
                scheduleGrid.dataProvider= scheduleGrouped;
                scheduleGrid.dataProvider.refresh();
                var s:Sort = new Sort();
                s.fields = [new SortField("@sortOrder")];
                // assign the sort to the grid's dataProvider and call refresh
                scheduleGrid.dataProvider.sort = s;
                scheduleGrid.dataProvider.refresh();
                

                I get a runtime error:

                TypeError: Error #1009: Cannot access a property or method of a null object reference.

                at mm1/makeSchedule()[/Users/stevelombardi/Documents/WORK/FINE COOKING/MenuMaker/mm1/src/mm1.mxml:343]

                at mm1/__makeScheduleBtn_click()[/Users/stevelombardi/Documents/WORK/FINE COOKING/MenuMaker/mm1/src/mm1.mxml:602]

                 

                The line that throws the error: scheduleGrid.dataProvider.sort = s;

                • 5. Re: Sorting  in a grouped advanced datagrid?
                  Handycam Level 1

                  I did further testing, it seems sorting the list before grouping does nothing, and one it's grouped its being sorted by the grouping field.

                   

                  What I need to do is sort in by a DIFFERENT field other than the one it's grouped by.

                   

                  Is that possible? Here is the data.  Note the attribute "sort order"

                   

                  <instruction time="The Day Before" txt="Make the Juniper-Ginger Butter for the roast turkey. Brine the Juniper-Ginger Butter Turkey for 4 to 6 hours, then remove from the brine and rub the juniper ginger butter under the skin. " sortOrder="04" jump="http://www.finecooking.com/recipes/roasted-thanksgiving-turkey-juniper-butter-pan-gravy.aspx" title="Roasted Turkey with Juniper-Ginger Butter and Pan Gravy"/>
                  <instruction time="4 Hours Before" txt="Heat the oven to 350°F for the Juniper-Ginger Butter Turkey. " sortOrder="08" jump="http://www.finecooking.com/recipes/roasted-thanksgiving-turkey-juniper-butter-pan-gravy.aspx" title="Roasted Turkey with Juniper-Ginger Butter and Pan Gravy"/>
                  <instruction time="3 Hours Before" txt="Put the Juniper-Ginger Butter Turkey in the oven to roast. " sortOrder="09" jump="http://www.finecooking.com/recipes/roasted-thanksgiving-turkey-juniper-butter-pan-gravy.aspx" title="Roasted Turkey with Juniper-Ginger Butter and Pan Gravy"/>
                  <instruction time="30 Minutes Before" txt="When the Juniper-Ginger Butter Turkey is done, tent it with foil and let it rest on a carving board while you make the gravy. " sortOrder="15" jump="http://www.finecooking.com/recipes/roasted-thanksgiving-turkey-juniper-butter-pan-gravy.aspx" title="Roasted Turkey with Juniper-Ginger Butter and Pan Gravy"/>
                  <instruction time="The Day Before" txt="Make the Maple-Pecan-Shallot Butter and refrigerate, covered. " sortOrder="04" jump="http://www.finecooking.com/recipes/baked-sweet-potatoes-maple-pecan-shallot-butter.aspx" title="Baked Sweet Potatoes with Maple-Pecan-Shallot Butter"/>
                  <instruction time="2 Hours Before" txt="Remove the Maple-Pecan-Shallot Butter from the refrigerator and let come to room temperature. " sortOrder="11" jump="http://www.finecooking.com/recipes/baked-sweet-potatoes-maple-pecan-shallot-butter.aspx" title="Baked Sweet Potatoes with Maple-Pecan-Shallot Butter"/>
                  <instruction time="1 Hour Before" txt="Bake the Sweet Potatoes at 425°F. " sortOrder="13" jump="http://www.finecooking.com/recipes/baked-sweet-potatoes-maple-pecan-shallot-butter.aspx" title="Baked Sweet Potatoes with Maple-Pecan-Shallot Butter"/>
                  
                  
                  

                   

                  When I sort this like so:

                   

                  scheduleListCollection = new XMLListCollection(scheduleList..instruction);
                  var srt:Sort = new Sort();
                  srt.fields = [new SortField("@sortOrder")];
                  scheduleListCollection.sort = srt;
                  scheduleListCollection.refresh();// this is assigned to the grid in the capture
                  scheduleSortedList = scheduleListCollection.source;
                  scheduleGrouped = new GroupingCollection2();
                  scheduleGrouped.source = scheduleSortedList;
                  var groupingInst:Grouping = new Grouping();
                  groupingInst.fields = [new GroupingField("@time")];
                  scheduleGrouped.grouping = groupingInst;
                  scheduleGrouped.refresh(false);
                  

                   

                  I can display it in a whole new, ungrouped data grid. This is the order I want the group labels to be in.

                  http://grab.by/9v4

                  But I need to group it now.

                  • 6. Re: Sorting  in a grouped advanced datagrid?
                    Sameer Bhatt Adobe Employee

                    Here, the grouped row (data) does not contain the sortOrder field and hence while sorting, the sort will not find the sort field (sortOrder) in the data.

                    So, it can't sort the data.

                     

                    Try this -

                         <fx:Script>

                              <![CDATA[

                                   import mx.collections.Sort;

                                   import mx.collections.SortField;

                                    

                                   

                                   private var xml:XML =

                                                   

                     

                     

                                   protected function adg2_creationCompleteHandler(event:FlexEvent):void

                                   {

                                        gc2.source = xml..instruction;

                                        gc2.refresh();

                                         

                                        adg2.validateNow();

                                         

                                        var s:Sort = new Sort();

                                        s.fields = [new SortField("sortOrder")];

                                        adg2.dataProvider.sort = s;

                                        adg2.dataProvider.refresh();

                                   }

                                    

                                   private function grpObjectFunc(label:String):Object

                                   {

                                        switch (label)

                                        {

                                             case "The Day Before": return {sortOrder:04};

                                             case "4 Hours Before": return ;

                                             case "3 Hours Before": return ;

                                             case "30 Minutes Before": return ;

                                             case "2 Hours Before": return ;

                                             case "1 Hour Before": return ;

                                        }

                                        return {};

                                   }

                     

                              ]]>

                         </fx:Script>

                     

                         <mx:AdvancedDataGrid id="adg2" width="400" height="400" creationComplete="adg2_creationCompleteHandler(event)">

                              <mx:dataProvider>

                                   <mx:GroupingCollection id="gc2">

                                        <mx:Grouping label="time" groupingObjectFunction="grpObjectFunc">

                                             <mx:GroupingField name="@time" />

                                        </mx:Grouping>

                                   </mx:GroupingCollection>

                              </mx:dataProvider>

                              <mx:columns>

                                   <mx:AdvancedDataGridColumn dataField="@time" />

                                   <mx:AdvancedDataGridColumn dataField="@jump" />

                              </mx:columns>

                         </mx:AdvancedDataGrid>

                     

                    Note that this is only one way of solving this, there can be other ways possible.

                     

                    -Sameer

                    • 7. Re: Sorting  in a grouped advanced datagrid?
                      Handycam Level 1

                      Thanks so much, Sameer, this saved my project. 

                       

                      This was pretty obscure, I doubt I ever would have discovered it on my own.  Thanks again for taking the time to share it.