7 Replies Latest reply on Sep 23, 2010 9:14 PM by Anitha Selvaraj

    sorting

    bindu84 Level 1

      How to sort date type data using sort field

       

       

      <?xml version="1.0"?>

      <mx:Application

       

       

      xmlns:mx="http://www.adobe.com/2006/mxml"

      initialize="initDP();" width="

      550" height="400">

       

       

       

      <mx:Script>

      <![CDATA[

       

       

      import mx.events.DataGridEvent;

       

      import mx.collections.*;

       

       

      // Declare storage variables and initialize the simple variables.

       

       

      // The data provider collection.

       

      private var myDPColl:ArrayCollection;

       

      // The Sort object used to sort the collection.

       

      private var sortA:Sort;

       

      // The sort fields used to determine the sort.

       

      private var sortByInStock:SortField;

       

      private var sortByDate:SortField;

       

      private var sortByAlbum:SortField;

       

      private var sortByPrice:SortField;

       

      // The data source that populates the collection.

       

      private var myDP:Array = [

      {Date:

      '10/12/2006', Album:'Slanted and Enchanted',

      Price:11.99, InStock:

      true},

      {Date:

      '10/11/2005', Album:'Crooked Rain, Crooked Rain',

      Price:10.99, InStock:

      false},

      {Date:

      '10/05/2003', Album:'Wowee Zowee',

      Price:12.99, InStock:

      true},

      {Date:

      '10/12/2004', Album:'Brighten the Corners',

      Price:11.99, InStock:

      false},

      {Date:

      '10/09/2006', Album:'Terror Twilight',

      Price:11.99, InStock:

      true},

      {Date:

      '10/12/2008', Album:'Buildings Meet the Sky',

      Price:14.99, InStock:

      true},

      {Date:

      '10/08/2006', Album:'Other', Price:5.99, InStock: true}

      ];

       

       

      //Initialize the DataGrid control with sorted data.

       

      private function initDP():void {

       

      //Create an ArrayCollection backed by the myDP array of data.

      myDPColl =

      new ArrayCollection(myDP);

       

      //Create a Sort object to sort the ArrrayCollection.

      sortA =

      new Sort();

       

      //Initialize SortField objects for all valid sort fields:

       

      // A true second parameter specifies a case-insensitive sort.

       

      // A true third parameter specifies descending sort order.

       

      // A true fourth parameter specifies a numeric sort.

      sortByInStock =

      new SortField("InStock", true, true);

      sortByDate =

      new SortField("Artist", true);

      sortByAlbum =

      new SortField("Album", true);

      sortByPrice =

      new SortField("Price", true, false, true);

       

      // Sort the grid using the sortByDate fields.

      sortA.fields=[sortByDate];

      myDPColl.sort=sortA;

       

      // Refresh the collection view to show the sort.

      myDPColl.refresh();

       

      // Set the ArrayCollection as the DataGrid data provider.

      myGrid.dataProvider=myDPColl;

       

      // Set the DataGrid row count to the array length,

       

      // plus one for the header.

      myGrid.rowCount=myDPColl.length +1;

      }

       

       

      // Re-sort the DataGrid control when the user clicks a header.

       

      private function headRelEvt(event:DataGridEvent):void {

       

      // The new third priority was the old second priority.

      sortA.fields[2] = sortA.fields[1];

       

      // The new second priority was the old first priority.

      sortA.fields[1] = sortA.fields[0];

       

      // The clicked column determines the new first priority.

       

      if (event.columnIndex==0) {

      sortA.fields[0] = sortByDate;

      }

      else if (event.columnIndex==1) {

      sortA.fields[0] = sortByAlbum;

      }

      else if (event.columnIndex==2) {

      sortA.fields[0] = sortByPrice;

      }

      else {

      sortA.fields[0] = sortByInStock;}

       

      // Apply the updated sort fields and re-sort.

      myDPColl.sort=sortA;

       

      // Refresh the collection to show the sort in the grid.

      myDPColl.refresh();

       

      // Prevent the DataGrid from doing a default column sort.

      event.preventDefault();

      }

      ]]>

       

      </mx:Script>

       

       

      <!-- The Data Grid control.

      By default the grid and its columns can be sorted by clicking.

      The headerRelease event handler overrides the default sort

      behavior. -->

       

      <mx:DataGrid id="myGrid" width="100%" headerRelease="headRelEvt(event);">

       

      <mx:columns>

       

      <mx:DataGridColumn minWidth="120" dataField="Date" />

       

      <mx:DataGridColumn minWidth="200" dataField="Album" />

       

      <mx:DataGridColumn width="75" dataField="Price" />

       

      <mx:DataGridColumn width="75" dataField="InStock"

      headerText="

      In Stock"/>

       

      </mx:columns>

       

      </mx:DataGrid>

       

      </mx:Application>

       

       

       

       

       

        • 1. Re: sorting
          jfb00 Level 3

          Hi,

          Here is a nice exaple using arraycollection.

          http://blog.flexexamples.com/2007/08/12/sorting-date-columns-in-a-datagrid/

           

          Johnny

           

          Please rate my answer

          • 2. Re: sorting
            bindu84 Level 1

            i want to sort dataprovier with out any click,

             

            initially want to aplly DataGrid sort order,

            • 3. Re: sorting
              jfb00 Level 3

              ok,

              Just call the sort function from your init function.

              The example just give you the idea how to do the sort.

               

              Johnny

               

              Please rate my answer

              • 4. Re: sorting
                bindu84 Level 1

                i m not gtting can u plesae

                tell me in my code

                • 5. Re: sorting
                  Anitha Selvaraj Level 2

                  Hi,

                   

                  Check the modified code below. This will work.

                   

                  <?xml version="1.0"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initDP();" width="550" height="400">
                  <mx:Script>
                      <![CDATA[
                          import mx.utils.ObjectUtil;
                          import mx.events.DataGridEvent;
                          import mx.collections.*;
                         
                          // Declare storage variables and initialize the simple variables.
                          // The data provider collection.
                          private var myDPColl:ArrayCollection;
                         
                          // The Sort object used to sort the collection.
                          private var sortA:Sort;
                         
                          // The sort fields used to determine the sort.
                          private var sortByInStock:SortField;
                         
                          private var sortByDate:SortField;
                         
                          private var sortByAlbum:SortField;
                         
                          private var sortByPrice:SortField;
                         
                          // The data source that populates the collection.
                          private var myDP:Array = [{Date:'10/12/2006', Album:'Slanted and Enchanted',Price:11.99, InStock:true},
                              {Date:'10/11/2005', Album:'Crooked Rain, Crooked Rain',Price:10.99, InStock:false},
                              {Date:'10/05/2003', Album:'Wowee Zowee',Price:12.99, InStock:true},
                              {Date:'10/12/2004', Album:'Brighten the Corners',Price:11.99, InStock:false},
                              {Date:'10/09/2006', Album:'Terror Twilight',Price:11.99, InStock:true},
                              {Date:'10/12/2008', Album:'Buildings Meet the Sky',Price:14.99, InStock:true},
                              {Date:'10/08/2006', Album:'Other', Price:5.99, InStock: true}];

                   

                          //Initialize the DataGrid control with sorted data.
                          private function initDP():void {
                         
                              //Create an ArrayCollection backed by the myDP array of data.
                              myDPColl = new ArrayCollection(myDP);
                                     
                              // Refresh the collection view to show the sort.
                              myDPColl.refresh();
                             
                              // Set the ArrayCollection as the DataGrid data provider.
                              myGrid.dataProvider=myDPColl;
                             
                              // Set the DataGrid row count to the array length,
                              // plus one for the header.
                              myGrid.rowCount=myDPColl.length +1;
                          }
                      
                          private function date_sortCompareFunc(object1:Object, object2:Object):int {
                              /* Date.parse() returns an int, but
                                 ObjectUtil.dateCompare() expects two
                                 Date objects, so convert String to
                                 int to Date. */
                              var dateA:Date = new Date(Date.parse(object1.Date));
                              var dateB:Date = new Date(Date.parse(object2.Date));
                              return ObjectUtil.dateCompare(dateA, dateB);
                          }
                     
                          private function date_dataTipFunc(object:Object):String {
                              return dateFormatter.format(object.Date);
                          }
                      ]]>
                  </mx:Script>
                  <!-- The Data Grid control.

                   

                  By default the grid and its columns can be sorted by clicking.

                   

                  The headerRelease event handler overrides the default sort

                   

                  behavior. -->
                  <mx:DateFormatter id="dateFormatter" formatString="DD/MM/YYYY" />
                  <mx:DataGrid id="myGrid" width="100%">
                      <mx:columns>
                          <mx:DataGridColumn minWidth="120" dataField="Date" sortCompareFunction="date_sortCompareFunc" showDataTips="true" dataTipFunction="date_dataTipFunc" />
                          <mx:DataGridColumn minWidth="200" dataField="Album" />
                          <mx:DataGridColumn width="75" dataField="Price" />
                          <mx:DataGridColumn width="75" dataField="InStock" headerText="In Stock"/>
                      </mx:columns>
                  </mx:DataGrid>
                  </mx:Application>

                   

                  Regards,

                  Anitha

                  • 6. Re: sorting
                    bindu84 Level 1

                    thanx

                    But i want the sort data in datagrid with any hader click

                    • 7. Re: sorting
                      Anitha Selvaraj Level 2

                      Do you mean only on header release event?