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
EmoticonEmoticon