how to limit the rows of datagrid in flex3? - apache-flex

Question

I have a data grid consisting of 3 columns & many rows, i want to show only the first 20 rows to user. Is there any way i can show only the first 20 rows in my datagrid.After by clicking button 'next', next 20 rows should display and so on...

Answer 1

If you have a list as a data provider (ArrayCollection or so) you can use filterFunction to filter your list.
The sample code is here:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application initialize="init()" layout="absolute" minHeight="600" minWidth="955"
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.utils.StringUtil;
private static const DP_LENGTH:int = 100;
private static const VISIBLE_ROWS_COUNT:int = 20;
[Bindable]
private var currentPage:int = 0;
[Bindable]
private var dataProvider:ArrayCollection;
protected function init():void
{
var dpArray:Array = [];
for (var i:int = 0; i < DP_LENGTH; i++)
{
var item:Object = { first: i, second: Math.random(), third: Math.random() };
dpArray.push(item);
}
dataProvider = new ArrayCollection(dpArray);
dataProvider.filterFunction = pagingFilterFunction;
dataProvider.refresh();
}
protected function nextPage():void
{
currentPage++;
dataProvider.refresh();
}
protected function prevPage():void
{
currentPage--;
dataProvider.refresh();
}
private function pagingFilterFunction(item:Object):Boolean
{
var start:int = currentPage * VISIBLE_ROWS_COUNT;
var end:int = start + VISIBLE_ROWS_COUNT - 1;
var index:int = dataProvider.getItemIndex(item);
return (index >= start) && (index <= end);
}
]]>
</mx:Script>
<mx:VBox horizontalAlign="center" horizontalCenter="0" verticalCenter="0">
<mx:DataGrid dataProvider="{dataProvider}">
<mx:columns>
<mx:DataGridColumn dataField="first" headerText="First" />
<mx:DataGridColumn dataField="second" headerText="Second" />
<mx:DataGridColumn dataField="third" headerText="Third" />
</mx:columns>
</mx:DataGrid>
<mx:Label
text="{StringUtil.substitute('Page {0} of {1}', currentPage + 1, Math.floor ((DP_LENGTH - 1) / VISIBLE_ROWS_COUNT) + 1)}" />
<mx:HBox>
<mx:Button click="prevPage()" enabled="{currentPage > 0}" label="Prev" />
<mx:Button click="nextPage()" enabled="{DP_LENGTH / VISIBLE_ROWS_COUNT - 1 > currentPage}" label="Next" />
</mx:HBox>
</mx:VBox>
</mx:Application>