<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:component="com.immy.*" initialize="init()" layout="absolute" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.CollectionEvent;
            import mx.events.ListEvent;
            
            [Bindable]private var tempData:ArrayCollection = new ArrayCollection;
            
            /**
             * Add sample data
             */
            private function init():void
            {
                for(var i:Number = 0; i < 2000; i++)
                {
                    tempData.addItem({
                            ID : i,
                            Name : "MyName" + i,
                            Age : i * 2
                        });
                }
                
                pagedDG.dataProvider = tempData;
            }
            
            /**
             * Method to display currently selected index
             */
            protected function pagedDG_itemClickHandler(event:ListEvent):void
            {
                lSelectedIndex.text = "Selected Index : " + pagedDG.itemSelected(event).toString();
            }

        ]]>
    </mx:Script>
    <mx:VBox x="0" y="0" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" backgroundColor="#303030">
        <mx:Label id="lSelectedIndex" text="Selected Index : -1" color="#F3F3F3"/>
        <component:pagedDatagrid
            id="pagedDG" 
            pagination="true"
            limit="100"
            dataProvider="{tempData}"
            borderColor="#F8F0F0" 
            alternatingItemColors="[#F9F9F9, #FFFFFF]" 
            width="354" height="228" 
            borderStyle="none"
            draggableColumns="false" sortableColumns="false" resizableColumns="false" 
            verticalGridLines="false" allowDragSelection="false" 
            horizontalScrollPolicy="off" editable="false"
            itemClick="pagedDG_itemClickHandler(event)">
            <component:columns>
                <mx:DataGridColumn headerText="ID" width="100" fontWeight="bold" dataField="ID"/>
                <mx:DataGridColumn headerText="Name" width="100" fontWeight="bold" dataField="Name"/>
                <mx:DataGridColumn headerText="Age" width="100" fontWeight="bold" dataField="Age"/>
            </component:columns>
        </component:pagedDatagrid>
    </mx:VBox>
</mx:Application>