AdvancedDataGrid load on demand

here's an example of a paginated datagrid you can use in flex.  all you have to do is change the init function.  you would just replace the data being set for the arraycollection to what you need inside there.  this example just loads random data.



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