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>