Page 1 of 1

Adobe flex add paging in datagrid

PostPosted: Mon Apr 18, 2011 12:46 pm
by haretu
Adobe flex add paging in datagrid
Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="InitApp()" xmlns:MyComp="*">
<mx:Script>
   <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.events.ItemClickEvent;
      import mx.controls.Button;
      import mx.controls.Alert;
      
      [Bindable]
      public var myData:ArrayCollection = new ArrayCollection();
      public var orgData:ArrayCollection = new ArrayCollection();
      [Bindable]
      public var nav:ArrayCollection = new ArrayCollection();
      public var pageSize:uint = 10;
      public var navSize:uint = 10;
      private var index:uint = 0;
      private var navPage:uint = 1;
      
      private function InitApp():void
      {
         for( var x:uint = 1; x <= 500; x++ )
         {
            var obj:Object = new Object();
            obj.Id = x.toString();
            obj.Name = "Column " + x.toString();
            obj.Street = "5555 Street";
            obj.Title = "CEO";
            obj.City = "El Paso";
            
            orgData.addItem(obj);
         }
         refreshDataProvider(index);
         createNavBar(Math.ceil(orgData.length/pageSize));
      }
      
      private function createNavBar(pages:uint = 1,set:uint = 0):void
      {
         nav.removeAll();
         if( pages > 1 )
         {
            if( set != 0 )
            {
               nav.addItem({label:"<<",data:0});
               if( (set - navSize ) >= 0 )
               {
                  nav.addItem({label:"<",data:set - navSize});
               }
               else
               {
                  nav.addItem({label:"<",data:0});
               }
            }
            
            for( var x:uint = 0; x < navSize; x++)
            {
               var pg:uint = x + set;
               nav.addItem({label: pg + 1,data: pg});
            }
            if( pg < pages - 1 )
            {
               nav.addItem({label:">",data:pg + 1});
               nav.addItem({label:">>",data:pages - pageSize});
            }
         }
      }
      
      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);
            if( event.item.data == 0 )
            {
               pageNav.selectedIndex = 0;
            }
            else
            {
               pageNav.selectedIndex = 2;
            }
         }
         
      }
      
      private function refreshDataProvider(start:uint):void
      {
         myData = new ArrayCollection( orgData.source.slice((start * pageSize),(start * pageSize) + pageSize) );
      }
   ]]>
</mx:Script>
<mx:VBox verticalGap="0">
   <mx:DataGrid id="dg" dataProvider="{myData}"></mx:DataGrid>
   <mx:ToggleButtonBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" width="{dg.width}"></mx:ToggleButtonBar>
</mx:VBox>

</mx:Application>