3 Replies Latest reply on Sep 27, 2010 1:39 PM by hernanls

    Advanced Datagrid dinamical pagination Component

    balhk

      Hi everyone,

      I'm a new developer in flex, (like 1 year ...) and I developed this dinamic Advanced Data Grid pagination component.

      • Why I did this?
        • I stumbled across an issue to show just a few lines from a really long list of objects from the dataProvider of my datagrid.
      • yeah, right .. but dinamic ?
        • sure it is dinamic, why not? This component don't have columns, you can add any quantity of columns with any format you need.
      • but, What about the dataProvider?
        • as we use and AdvancedDataGrid, the source of dataProvider, is an object, in the case I felt better using an ArrayCollection, cause it fits almost everything that provides; we can have an arrayCollection of XML, classes .. and that kind of stuff.
      • the number of rows in the dataGrid? can I change? .. I dont want a lot of then...
        • sure we can, there is a way to set the number from outside the component(code) and a numericStepper to set it manually.


      a good question, I made myself, and had a bit problem with it ..

      • The source ArrayCollection I will add to the component have a FilterFunction .. working pretty good outside it .. will it work property inside the component?
        • all right, I had a little headache to solve this, but the answer came as easy as the question, and YES IT WORKSSS.

      so lets see .. columns added,  provider (with/without filter) added, number of rows shown added from user/code.

      I think that this is all.

      it is just a VERSION 1.0 but I think it will fit almost everything it is used for.

      the example is shown bellow.

       

      Running Example

       

      PS.: it seen the code wont open in the running example, so I will put the codes here ...

        • 1. Re: Advanced Datagrid dinamical pagination Component
          balhk Level 1

          mail.mxml code

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application
          
           xmlns:fx="http://ns.adobe.com/mxml/2009" 
                            xmlns:s="
          
          library://ns.adobe.com/flex/spark" 
                            xmlns:mx="
          
          library://ns.adobe.com/flex/mx"                   minWidth="
          
          955" minHeight="600" xmlns:local="*"
                            creationComplete="init()" viewSourceURL="
          
          srcview/index.html">
          
          
          <fx:Declarations>
          
          
          <!-- Place non-visual elements (e.g., services, value objects) here -->
          
          
          </fx:Declarations>
          
          
          
          <fx:Script>
          
                    <![CDATA[
          
          import mx.collections.ArrayCollection;
          
          import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
          
          
          private var columns:Array = [];
          
          
          
          private function init():void{
          
          
          //here we cam change by code, the number of rows in the data grid
                              advDataGrid.setRowCount(100);
          
          
          //set the text for the label of rows in the datagrid
                              advDataGrid.setRowsLabel(
          "rows: ");
          
          
          //create the columns dinamically 
          
          var adv:AdvancedDataGridColumn = new AdvancedDataGridColumn();                    adv.headerText = 
          
          "firstname";
                              adv.dataField = 
          
          "firstname";                    columns.push(adv);
          
                              adv = 
          
          new AdvancedDataGridColumn();                    adv.headerText = 
          
          "Middlename";                    adv.dataField = 
          
          "middlename";
                              columns.push(adv);
          
          
          
          //set the columns in the data grid
                              advDataGrid.setDataGridColumns(columns);
          
                              advDataGrid.dataProvider= generateProvider();
                         }
          
          
          private function generateProvider():ArrayCollection{
          
          var ac:ArrayCollection = new ArrayCollection();
          
          
          var obj:Object = new Object();
          
          
          
          for(var i:int=0; i<10000; i++){                         obj = 
          
          new Object();
                                   obj.firstname = 
          
          "My Name "+i;                         obj.middlename = 
          
          "middle "+i;                         obj.lastname = 
          
          "last "+i;                         ac.addItem(obj);
                              }
          
          
          return ac;               }
          
          
          
          /**                * here we can add a new column in the datagrid in execution time
                          */
          
          
          private function addcolumn():void{
          
          
          var adv:AdvancedDataGridColumn = new AdvancedDataGridColumn();                    adv.headerText = 
          
          "Lastname";
                              adv.dataField = 
          
          "lastname";                    advDataGrid.addNewColumn(adv);
          
          
          this.button1.enabled=false;
                         }
                    ]]>
          
          
          </fx:Script>
          
          
          
          <s:BorderContainer>
          
          
          <s:layout>
          
          
          <s:VerticalLayout/>
          
          
          </s:layout>
          
          
          <local:AdvancedPagingDataGrid id="advDataGrid" width="500" height="300"/>
          
          
          <s:Button id="button1" click="addcolumn()" label="Add last name" enabled="true"/>
          
          
          </s:BorderContainer>
          
          
          </s:Application>
          
          
          
          
          
          
          
          
          • 2. Re: Advanced Datagrid dinamical pagination Component
            balhk Level 1

            AdvancedPaginationDataGrid.as


            <?xml version="1.0" encoding="utf-8"?>

            <!-- DEVELOPED BY Bal-Hanã on 2010/09/27

            Version 1.0

            open source code with rights to copy -->

            <s:BorderContainer

             

             

            xmlns:fx="http://ns.adobe.com/mxml/2009"

            xmlns:s="

            library://ns.adobe.com/flex/spark"

            xmlns:mx="

            library://ns.adobe.com/flex/mx"

            width="

            100%" height="100%" creationComplete="init()" borderVisible="false">

             

             

            <s:layout>

             

             

            <s:VerticalLayout/>

             

             

            </s:layout>

             

             

            <fx:Declarations>

             

            <!-- Place non-visual elements (e.g., services, value objects) here -->

             

            </fx:Declarations>

             

             

            <fx:Script>

            <![CDATA[

             

            import flash.sampler.NewObjectSample;

             

             

            import mx.collections.ArrayCollection;

             

            import mx.collections.CursorBookmark;

             

            import mx.collections.ICollectionView;

             

            import mx.collections.IViewCursor;

             

            import mx.collections.ListCollectionView;

             

            import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;

             

            import mx.events.CollectionEvent;

             

             

            //########## PRIVATE VARIABLES ##########//

            [

            Bindable]

             

            /**

            * var that will show the atual page seen and the Number of pages available in the DataProvider</br>

            * ex.: 1-50 ; 5-300 ; 100-100;

            */

             

            private var pageCount:String;

             

             

            /**

            * var that will hold the actual page from the DataProvider seen by the user

            */

             

            private var actPage:uint = 1;

             

             

            /**

            * the maximum number of pages available in the Provider

            */

             

            private var maxPages:uint;

             

            [

            Bindable]

             

            /**

            * DataProvider that will be created dinamically to show in the AdvancedDataGrid

            */

             

            private var _dp:ArrayCollection;

             

             

            /**

            * original Provider from where de AdvancedDataGrid

            */

             

            private var _dataProvider:ArrayCollection = new ArrayCollection;

             

            [

            Bindable]

             

            /**

            * the number of rows set by the user

            */

             

            private var rowCount:int=100;

             

             

            /**

            * the AdvancedDataGrid columns array

            */

             

            private var advColumns:Array =[];

             

             

            //########## PUBLIC VARIABLES ##########//

             

             

             

            //########## PRIVATE FUNCTIONS ##########//

             

            /**

            * initialize function, set initial providers and labels

            */

             

            private function init():void{

             

            }

             

             

            /**

            * Function <code>providerChanged</code> will be called each time the <code>provider</code> dispatch a <code>CollectionEvent.COLLECTION_CHANGE</code><br/>

            * this will refresh all the providers needed

            */

             

            private function providerChanged(ev:Event):void{

             

             

            //2.0)refresh the datagrid shown rows

            refresh();

            }

             

             

            /**

            * function called to set the datagrid dataProvider with the First available page of rows

            */

             

            private function goToFirst():void{

             

            //1.0)set the actualpage to the first one

            actPage=1;

             

            //2.0)set the enabled true/false mode of each buttons

             

            this.initialPageBtn.enabled=false;

             

            this.backwardBtn.enabled=false;

             

            this.forwardBtn.enabled=true;

             

            this.lastPageBtn.enabled=true;

            refresh();

             

            }

             

             

            /**

            * function called to set the datagrid data provider with the last shown page of rows

            */

             

            private function goBack():void{

             

            //1.0)go back one index in the actualpage

            actPage--;

             

            //2.0)set the enabled true/false mode of each buttons

             

            if(actPage==1){

             

            this.initialPageBtn.enabled=false;

             

            this.backwardBtn.enabled=false;

            }

             

            this.forwardBtn.enabled=true;

             

            this.lastPageBtn.enabled=true;

            refresh();

            }

             

             

            /**

            * function called to set the datagrid data provider with the next available page of rows

            */

             

            private function goToNext():void{

             

            //1.0)go to the next page index

            actPage++;

             

            //2.0)set the enabled true/false mode of each buttons

             

            if(actPage==maxPages){

             

            this.forwardBtn.enabled=false;

             

            this.lastPageBtn.enabled=false;

            }

             

            this.initialPageBtn.enabled=true;

             

            this.backwardBtn.enabled=true;

            refresh();

            }

             

             

            /**

            * function called to set the datagrid dataProvider with the Last available page of rows

            */

             

            private function goToLast():void{

             

            //1.0)go to the last page index

            actPage=maxPages;

             

            //2.0)set the enabled true/false mode of each buttons

             

            this.initialPageBtn.enabled=true;

             

            this.backwardBtn.enabled=true;

             

            this.forwardBtn.enabled=false;

             

            this.lastPageBtn.enabled=false;

            refresh();

            }

             

             

            /**

            * Function that will parse throw the Provider, to generate the new datagrid DataProvider

            *

            * @param init:int the first object of the new dataProvider

            * @param end:int the last object of the new dataProvider

            *

            * @return arrC:ArrayCollection the arraycollection that will be shown in the current page

            */

             

            private function setProvider(init:int, end:int):ArrayCollection{

             

            //1.0)create local vars and initialize then

             

            var arrC:ArrayCollection = new ArrayCollection;

             

            var arr:Array = _dataProvider.toArray();

             

             

            //2.0)slice the group of objects we need, and set in the arrayColection

            arrC.source = arr.slice(init,end);

             

            //3.0)clear the array, we dont need a memory leak

            arr=[];

             

             

            return arrC;

            }

             

             

            /**

            * Handler that will catch the change event in the numericStepper,

            * this numericStepper sets the number of itens seen in the Datagrid for each page

            */

             

            private function stepperChangeHandler():void{

            setRowCount(

            this.rowCountStepper.value);

            }

             

            //########## PUBLIC FUNCTIONS ##########//

             

            /**

            * Function called to set the provider of the compoment,<br/>

            * the dataGrid dataProvider will be parsed from the provider

            * @param value:ArrayCollection any kind of arrayObject, that will be plotted in the DataGrid

            */

             

            public function set dataProvider(value:ArrayCollection):void{

             

            //remove the old eventlistener

             

            this._dataProvider.removeEventListener(CollectionEvent.COLLECTION_CHANGE,providerChanged);

            _dataProvider = value;

             

            //add a new eventlistener

             

            //everytime the provider is incremented with new objects we call the providerChanged to parse any relative change

             

            this._dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE,providerChanged);

            providerChanged(

            null);

            }

             

            /**

            * function that will return the raw dataprovider of the component of the Datagrid

            */

             

            public function get dataProvider():ArrayCollection{

             

            return this._dataProvider;

            }

             

             

            /**

            * refresh the advancedDataGrid dataProvider

            */

             

            public function refresh():void{

             

            //1.0)find the number of available pages

             

            var i:uint= this._dataProvider.length/rowCount;

             

            //1.1)check if the available pages will really show all the provider collection

             

            if(i==0 || i*rowCount < this._dataProvider.length){

            i++;

            }

             

            //1.2)change the number of max pages available

             

            this.maxPages=i;

             

             

            if(maxPages > actPage){

             

            this.forwardBtn.enabled=true;

             

            this.lastPageBtn.enabled=true;

            }

             

             

            if(actPage > maxPages){

            actPage = maxPages;

             

            this.forwardBtn.enabled=false;

             

            this.lastPageBtn.enabled=false;

            }

             

             

            var init:int = (actPage-1)*rowCount;

             

            var end:int = init+rowCount;

             

            this._dp=setProvider(init,end);

            advDataGrid.dataProvider=_dp;

             

             

            //2.0)change the label of "actualpage - maxpages"

             

            this.pageCount = this.actPage+" - "+this.maxPages;

            }

             

             

            /**

            * Function that will be called in order to add new column in the AdvancedDataGrid

            * @param newColumn:AdvancedDataGridColumn the new column to be added

            */

             

            public function addNewColumn(newColumn:AdvancedDataGridColumn):void{

            advColumns.push(newColumn);

             

            this.advDataGrid.columns = advColumns;

            }

             

             

            /**

            * Function that will be called to change the AdvancedDataGrid columns array <br/>

            * this will renew the array, the old one will be lost, and a new one will be added

            * @param

            */

             

            public function setDataGridColumns(gridColumns:Array):void{

             

            this.advColumns = gridColumns;

             

            this.advDataGrid.columns = advColumns;

            }

             

             

            /**

            * Function that enables the user to change the number of rows available in the datagrid

            * @param rows:uint new number of rows of the datagrid

            */

             

            public function setRowCount(rows:uint):void{

             

            this.rowCount = rows;

            providerChanged(

            null);

            }

             

             

            /**

            * add the text to the numericStepper rows count label

            */

             

            public function setRowsLabel(str:String):void{

             

            this.rowsLabel.text=str;

            }

            ]]>

             

            </fx:Script>

             

             

            <mx:AdvancedDataGrid id="advDataGrid" rowCount="{rowCount}"

            resizableColumns="

            true"

            width="

            100%" height="100%"

            variableRowHeight="

            true"

            rowHeight="

            17" fontSize="9"/>

             

            <!-- headerRenderer="{header_renderer}"-->

             

             

            <s:BorderContainer width="100%" height="21" borderVisible="true">

             

            <s:layout>

             

            <s:HorizontalLayout/>

             

            </s:layout>

             

            <s:Button id="initialPageBtn" label="&lt;&lt;" width="40" height="20" click="goToFirst()" enabled="false"/>

             

            <s:Button id="backwardBtn" label="&lt;" width="35" height="20" click="goBack()" enabled="false"/>

             

            <s:Label id="pageCountLbl" text="{pageCount}" width="100" textAlign="center" verticalAlign="middle" height="20"/>

             

            <s:Button id="forwardBtn" label="&gt;" width="35" height="20" click="goToNext()" enabled="false"/>

             

            <s:Button id="lastPageBtn" label="&gt;&gt;" width="40" height="20" click="goToLast()" enabled="false"/>

             

            <s:Label id="rowsLabel" verticalAlign="middle" height="20"/>

             

            <s:NumericStepper id="rowCountStepper" minimum="1" value="{rowCount}" maximum="10000" change="stepperChangeHandler()" stepSize="10" snapInterval="1" height="20" width="70"/>

             

            </s:BorderContainer>

            </s:BorderContainer>

            • 3. Re: Advanced Datagrid dinamical pagination Component
              hernanls

              Excelent component Bal, you are the MAN !