adobe flex paging AND filtering on flex Datagrids or Flex Ad

adobe flex paging AND filtering on flex Datagrids or Flex Ad

Postby haretu » Mon Apr 18, 2011 12:39 pm

adobe flex paging AND filtering on flex Datagrids or Flex AdvancedDatagrids.

Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
//  NL4B / NL for Business
//  Copyrights 2008 NL for Business / Theo van der Sluijs
//
//  All Rights Reserved.
//
//  Creative Commons Attribution-Share Alike 3.0 Netherlands License
// 
//  You are free:
//  to copy, distribute, display, and perform the work
//  to make derivative works
// 
//  Attribution: You must give the original author credit.
// 
//  Share Alike: If you alter, transform, or build upon this work, you may distribute the resulting work only under a licence identical to this one
// 
//  For any reuse or distribution, you must make clear to others the licence terms of this work.
//  Any of these conditions can be waived if you get permission from the copyright holder.
//  Nothing in this license impairs or restricts the author's moral rights.
// 
//  http://creativecommons.org/licenses/by-sa/3.0/
// 
//  http://creativecommons.org/licenses/by-sa/3.0/nl/
//  http://creativecommons.org/international
// 
//
//  www.nl4b.com            info@nl4b.com
//     www.iamboredsoiblog.eu    theo@iamboredsoiblog.eu
//
////////////////////////////////////////////////////////////////////////////////
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                        creationComplete="InitApp()"
                        viewSourceURL="srcview/index.html"
                        horizontalAlign="center"
                        verticalAlign="middle">

      <mx:Script source="com/scripts/globalscript.as" />



<mx:Panel title="Paging and Filtering" width="450">
    <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">

      <mx:HBox>
          <mx:TextInput id="txtCheck"/>
          <!--
          <mx:TextInput id="txtCheck" change="filterVANm();"/>
          if you would like, you could also filter on the change of the textinput but
          with large datagrids this is rather slow
          -->
          <mx:Button label="Filter" click="filterVANm();"/>
          <mx:Label id="lblBla" text="This filters the first column."/>     
      </mx:HBox>
     
      <mx:DataGrid id="contentAlertDataGrid"
                     dataProvider="{myData}"
                     width="400"
                     height="250"
                     rowHeight="18"
                     verticalScrollPolicy="on"
                     horizontalScrollPolicy="off"/>
      <mx:HBox width="100%" >
            <mx:LinkButton id="viewAllLinkBtn"
                           label="View All"
                           click="contentAlertDataGrid.dataProvider = orgData;"/>
            <mx:VRule height="20"/>
            <mx:Label id="viewingAlertsLabel1" text=""/>
            <mx:Label id="viewingAlertsLabel2" text=""/>
      </mx:HBox>
      <mx:HRule width="400"/>
      <mx:HBox width="100%">
            <mx:LinkBar id="pageNav"
                        itemClick="navigatePage(event)"
                        dataProvider="{nav}"
                        horizontalGap="1"
                        width="100%"/>
      </mx:HBox>
   
    </mx:VBox>
   
    <mx:ControlBar horizontalAlign="ecnter" width="100%">
        <mx:Label text="Iamboredsoiblog.eu" color="#FFFFFF" fontWeight="bold" useHandCursor="true" buttonMode="true"  mouseChildren="false" click="getURL('http://www.iamboredsoiblog.eu', '_blank');"/>
        <mx:VRule height="15" />
        <mx:Label text="nl4b.com" color="#FFFFFF" fontWeight="bold" useHandCursor="true" buttonMode="true"  mouseChildren="false" click="getURL('http://www.nl4b.com', '_blank');"/>
    </mx:ControlBar>       
       
    </mx:Panel>
</mx:Application>


globalscript.as
Code: Select all
// ActionScript file
                  import mx.collections.ArrayCollection;
                  import mx.events.ItemClickEvent;

                  /* Viewing pages */
                  [Bindable] public var startAlert:uint;
                  [Bindable] public var endAlert:uint;
                  [Bindable] public var totalAlert:uint;
                 
                  [Bindable] public var myData:ArrayCollection = new ArrayCollection();
                 
                  public var orgData:ArrayCollection = new ArrayCollection();
                  public var ArrData:ArrayCollection = new ArrayCollection;
                 
                  [Bindable] public var nav:ArrayCollection = new ArrayCollection();
                 
                  /* Records per page */
                  private var pageSize:uint = 0;
                  private var intPages:uint = 0;
                  private var CurrPage:uint = 0;
                 
                  /* Number of pages per view */
                  public var navSize:uint = 5;
                 
                  private var index:uint = 0;
                  private var navPage:uint = 1;
                 
                  /* Test data */
                  private function InitApp():void
                  {
                        for( var x:uint = 1; x <= 555; x++ )
                        {
                              var obj:Object = new Object();
                              obj.Artifact = "Art " + x.toString();
                              obj.Owner = "Theo van der Sluijs";
                              obj.MarkedBy = "NL for Business";
                             
                              orgData.addItem(obj);
                        }
                        ArrData = orgData;
                       
                        pageSize = (contentAlertDataGrid.height/contentAlertDataGrid.rowHeight)-1 ;       
                        //wow dynamic pazeSize !
                       
                        intPages = Math.ceil(orgData.length/pageSize);
                        //let's calc the intPages
                                       
                        refreshDataProvider(index);
                        //refresh the data provider
                       
                        if(intPages<=1){ //less then one page ?
                            intPages = 1;
                            createNavBar(1);
                        }else{ //more pages !!!!
                            createNavBar(intPages);   
                        }

                  }
                 
                  /* Create pagination */
                  private function createNavBar(pages:uint = 1,intSet:uint = 0):void{
                        nav.removeAll();
                        if( intSet > 1 ){
                              nav.addItem({label:"<< First",data:0});
                             
                              var intLFive:int = intSet-navSize; // calculate start of last 5;
                             
                              nav.addItem({label:"< Previous",data:intLFive});
                        }
                             
                      for( var x:uint = 0; x < navSize; x++){
                            var pg:uint = x + intSet;
                            nav.addItem({label: pg + 1,data: pg});
                           
                            var pgg:uint = pg+1;
                            if(pgg>=intPages){ //if you reach the last page stop adding linkselectors on the navbar
                                x=navSize;
                            }
                      }
                     
                      var lastpage:Number = 0;
                      for( var y:uint = navSize; y <= pages-1;y = y + navSize ){ //lets calculate the lastpage button
                          if(y+5 > navSize){
                              lastpage = y;
                          }
                         
                      }
                     
                     
                     
                      if( pg < pages - 1 ){
                            nav.addItem({label:"Next >",data:pg + 1});
                            nav.addItem({label:"Last >>",data:lastpage});
                      }                             
                    }
                 
                  /* Refresh data per page groups */
                  private function navigatePage(event:ItemClickEvent):void
                  {
                        refreshDataProvider(event.item.data);
                        var lb:String = event.item.label.toString();
                        if( lb.indexOf("<") > -1 || lb.indexOf(">") > -1 )
                        {
                              //createNavBar(Math.ceil(orgData.length/pageSize),event.item.data);
                              createNavBar(Math.ceil(ArrData.length/pageSize),event.item.data);
                        }
                       
                  }
                 
                  private function refreshDataProvider(start:uint):void{
                     
                      myData = new ArrayCollection( ArrData.source.slice((start * pageSize),(start * pageSize) + pageSize) );
                     
                       viewingAlertsLabel1.text = 'Page ' + (start+1).toString() + ' of ' + intPages.toString();
                      viewingAlertsLabel2.text = 'Total items ' + orgData.length.toString();
                  }
                                   
                 
                  private function viewingAlerts ():void {
                        startAlert == ((navPage - 1) * pageSize + 1);
                        endAlert == ((navPage - 1) * pageSize + pageSize);
                        totalAlert == myData.length;
                  }
                 
           
            //search on VA-Naam
            private function filterVANaam(item:Object):Boolean{
                    var pattern:RegExp = new RegExp("[^]*"+txtCheck.text+"[^]*", "i");
                    return pattern.test(item.Artifact);
            }
           
            private function filterVANm():void{
                orgData.filterFunction = filterVANaam;
                orgData.refresh();
               
                //var OBData:Object = orgData;
                ArrData = new ArrayCollection();

                for each (var item in orgData) {
                    ArrData.addItem(item);
                }

                intPages = Math.ceil(orgData.length/pageSize); //let's recalculate the pages
                //orgData2 = (
                    var start:uint = 0;
                  createNavBar(Math.ceil(ArrData.length/pageSize));

                   myData = new ArrayCollection( ArrData.source.slice((start * pageSize),(start * pageSize) + pageSize) );
                  viewingAlertsLabel1.text = 'Page ' + (start+1).toString() + ' of ' + intPages.toString();
                  viewingAlertsLabel2.text = 'Total items ' + ArrData.length.toString();
                contentAlertDataGrid.instanceIndices;
              }
             
    private function getURL(url:String, window:String):void {
        var request:URLRequest;
        request = new URLRequest(url);
        navigateToURL(request, window);
    }             
             
Attachments
Screen shot 2011-04-18 at 12.43.18 PM.jpg
Screen shot 2011-04-18 at 12.43.18 PM.jpg (73.22 KiB) Viewed 1326 times
haretu
 
Posts: 132
Joined: Sat Jan 08, 2011 9:56 pm

Return to Adobe FLEX Flash

Who is online

Users browsing this forum: No registered users and 1 guest

cron