Creating a pager for the Datagrid Component in Flex

I had to page a flex datagrid component, so I came up with a decent fix. I hope this helps someone. Please so not hesistate to let me know if it helped and any changes you think I could include.

Code after the jump.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical” creationComplete=”initApp()”>
<!– Created by Oluwaseun Ladeinde, 13, May 2010.

A pager bundled with the datagrid component.

You can replace the next and previous buttons with images. I have used the text input to get the row size from the user, you can decide your design. Just copy and paste this code and it should work if there are no issues with the quotes–>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;

[Bindable]
private var myColl:ArrayCollection;
private var innerprovider:Array =[];
private var splitted:Array =[];

private var pageCount:int=0;
private var pageSize:int=0;
private var stopMove:Boolean=false;
private var rowSize:int;

/**
* Say an XML reference, may be a result form a query
* or some xml file somewhere.
*/
public var xmlporvider:XML =
<result>
<data>
<profit>5000</profit>
<expenses>20000</expenses>
<month>January</month>
</data>
<data>
<profit>1000</profit>
<expenses>22000</expenses>
<month>Febuary</month>
</data>
<data>
<profit>9000</profit>
<expenses>17500</expenses>
<month>March</month>
</data>
<data>
<profit>6000</profit>
<expenses>26000</expenses>
<month>April</month>
</data>
<data>
<profit>5000</profit>
<expenses>24950</expenses>
<month>May</month>
</data>
<data>
<profit>2590</profit>
<expenses>9040</expenses>
<month>June</month>
</data>
<data>
<profit>4600</profit>
<expenses>18500</expenses>
<month>July</month>
</data>
<data>
<profit>3500</profit>
<expenses>22500</expenses>
<month>August</month>
</data>
<data>
<profit>7850</profit>
<expenses>21000</expenses>
<month>September</month>
</data>
<data>
<profit>7000</profit>
<expenses>20000</expenses>
<month>October</month>
</data>
<data>
<profit>6250</profit>
<expenses>25000</expenses>
<month>November</month>
</data>
<data>
<profit>7000</profit>
<expenses>28000</expenses>
<month>December</month>
</data>
</result>;

//// this function takes the xml and convert it to an array
//// i had to do this because of the [aging support I want to implement
/// this was also needed for a project I was working on where I needed to use an arraycollection
/// instead of XML
private function initApp():void
{
var provider:Array = [];
var list:XMLList = xmlporvider.data;

for(var w:int=0; w<list.length(); ++w)
{
provider.push({node:list[w], children:list[w].children()});
}

for(var q:int=0; q<provider.length; ++q)
{
var newObject:Object = {};
for(var win:int=0; win<provider[q].children.length(); ++win)
{
var element:XML = provider[q].children[win];
var nodeName:String = element.localName();//children[q].localName();
var nodeValue:String = element.text()[0];
newObject[nodeName] = nodeValue;
}

this.innerprovider.push(newObject);
}
}

private function config():void
{
var enteredValue:* = rowcount.text;
if(enteredValue<=0 || int(enteredValue)==0)
{
Alert.show(“Please enter a valid number greater than 0”);
}
else
{
var currentPager:int=0;
this.rowSize = int(rowcount.text);
this.pageSize = innerprovider.length/this.rowSize;
if((innerprovider.length % this.rowSize)>0)
{
++this.pageSize;
}

if(this.splitted.length>0)
this.splitted = [];

var endIndex:int = this.rowSize;
for(var startIndex:int=0; startIndex<innerprovider.length;)
{
var newArray:Array = innerprovider.slice(startIndex, endIndex);
startIndex = startIndex + this.rowSize;
endIndex = startIndex + this.rowSize;
this.splitted.push(newArray);
}

if(this.pageCount>0)
this.pageCount=0;
this.myColl = new ArrayCollection(this.splitted[this.pageCount]);
this.grid.dataProvider = this.myColl;
this.grid.rowCount = this.rowSize;
setPagerText();
}

}

private function next():void
{
trace(“next page”);
if(this.pageCount < this.pageSize-1)
{
++this.pageCount;
this.myColl = new ArrayCollection(this.splitted[this.pageCount]);
this.grid.dataProvider = this.myColl;
this.grid.rowCount = this.rowSize;

setPagerText();
}

/* if(this.pageCount == this.pageSize-1)
{
nextBtn.enabled = false;
}
else
{
nextBtn.enabled = true;
}     */
}

public function setPagerText():void
{
var pageNumber:int=this.pageCount+1;
pager.text = pageNumber + “/” + this.pageSize;
}

private function prev():void
{
trace(“previous page”);
if(this.pageCount>0)
{
–this.pageCount;
this.myColl = new ArrayCollection(this.splitted[this.pageCount]);
this.grid.dataProvider = this.myColl;
this.grid.rowCount = this.rowSize;

setPagerText();
}

/* if(this.pageCount == this.pageSize-1)
{
prevBtn.enabled = false;
}
else
{
prevBtn.enabled = true;
}     */
}

]]>
</mx:Script>
<mx:Form>
<mx:FormItem label=”Enter Row Size and Hit Enter:”>
<mx:TextInput id=”rowcount” text=”” enter=”config()”/>
</mx:FormItem>
</mx:Form>

<mx:HBox width=”400″>
<mx:Button id=”prevBtn” label=”prev” click=”prev()”/>
<mx:Label id=”pager” text=”0″/>
<mx:Button id=”nextBtn” label=”next” click=”next()”/>
<mx:Spacer width=”100%”/>
</mx:HBox>
<mx:DataGrid id=”grid” width=”400″/>
</mx:Application>

Advertisements