4 Replies Latest reply on Feb 2, 2010 10:44 PM by 194642537

    Sorting all records in datagrid

    194642537 Level 1
      Hi All,
      I have a datagrid with pagination. On default or on click of the sort arrow of a particular column in the grid  it sorts only the current page data. my requirement is it should sort across all records returned in array collection not only the records for the current page. Please share the working sample code.

       

       

      Thanks,

      Ravisha


        • 1. Re: Sorting all records in datagrid
          archemedia Level 4

          Hi,

           

          The point is to sort and filter your dataprovider collection. You can access the array and apply powerfull functions like sort, sortOn, filter etc...

           

          You can trigger this function by setting the sortCompareFunction of your datagridColumns

           

          The whole point of working with datagrids is to bind your dataProvider property to a collection (like an ArrayCollection) and then to do all kind of things with this collection. The dataGrid itself will update automatically.

           

          Dany

          • 2. Re: Sorting all records in datagrid
            194642537 Level 1

            Thank you for the reply.

             

             

            We tried the same but did not work. Can you please provide a working sample code for the same.?

             

             

            Thanks,

            Ravisha

            • 3. Re: Sorting all records in datagrid
              archemedia Level 4

              Try this code:

               

              <?xml version="1.0"?>
              <!-- dpcontrols/adg/SimpleHierarchicalADG.mxml -->
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" layout="vertical">

               

                <mx:Script>
                  <![CDATA[
                      import mx.events.DataGridEvent;
                        import mx.collections.ArrayCollection;
                                 
                        include "dgData.as";
                       
                        [Bindable]
                        private var dp:ArrayCollection;
                       
                        private var offset:int = 0;
                        [Bindable]
                        private var pageNum:int = 0;
                        [Bindable]
                        private var maxPages:int;
                        [Bindable]
                        private var dgRowCount:int = 9;
                       
                        private function init():void
                        {
                            dp = new ArrayCollection();
                            maxPages = dpHierarchy.length / dgRowCount;
                           
                            filterPage();
                        }
                       
                        private function navToPage(pageOffset:int):void
                        {
                            pageNum += pageOffset;
                           
                            if (pageNum < 0)
                                pageNum = 0;
                               
                            if (pageNum > maxPages)
                                pageNum = maxPages;
                           
                            offset = pageNum * dgRowCount;
                               
                            filterPage();
                        }
                       
                        private function filterPage():void
                        {
                            dp.source = dpHierarchy.source.filter(function callback(item:*, index:int, array:Array):Boolean
                                    {
                                        return (index >= offset && index < offset + dgRowCount);
                                    });
                        }
                       
                        private function doSort(evt:DataGridEvent):void
                        {
                            var sortDescending:Boolean = evt.itemRenderer.data.sortDescending;
                           
                            !sortDescending ? dpHierarchy.source.sortOn(evt.dataField, Array.NUMERIC | Array.DESCENDING) : dpHierarchy.source.sortOn(evt.dataField, Array.NUMERIC);
                           
                            filterPage();
                        }
                    ]]>
                  </mx:Script>

               

                  <mx:DataGrid dataProvider="{dp}" rowCount="{dgRowCount}" sortableColumns="true" headerRelease="doSort(event)">
                      <mx:columns>
                          <mx:DataGridColumn headerText="ID" dataField="id"/>
                          <mx:DataGridColumn headerText="First prop" dataField="firstProp"/>
                          <mx:DataGridColumn headerText="Second prop" dataField="secondProp"/>
                      </mx:columns>
                  </mx:DataGrid>
                  <mx:HBox horizontalAlign="center">
                      <mx:Button label="Prev page" click="navToPage(-1)"/>
                      <mx:Label text="{pageNum + 1}/{maxPages + 1}" textAlign="center" width="60"/>
                      <mx:Button label="Next page" click="navToPage(1)"/>
                  </mx:HBox> 
              </mx:Application>

               

              You have to add the following file to your source folder:

               

              Hope you can work it out with this

               

              Dany