Tutorial :Plugin to add pagination in a Flex Datagrid?



Question:

Is there a library or plugin that could be added to a Flex project to add pagination to a Flex Datagrid?


Solution:1

The source code for this paginated datagrid can be found here.

<?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>  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »