Datagrid pagining with count

I am trying to get my datagrid paging to work 100%:

The paging part is working, but I need the display of items: "Viewing Laerts 1-25 of 500" to display right.
I need to be able to click "view All' and all records return in the data grid and scroll.

CODE:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                        layout="absolute"
                        creationComplete="InitApp()">

<mx:VBox width="600" height="400"
             paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">

      <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();
                  
                  /* Records per page */
                  public var pageSize:uint = 25;
                  /* Number of pages per view */
                  public var navSize:uint = 10;
                  private var index:uint = 0;
                  private var navPage:uint = 1;
                  
                  /* Test data */
                  private function InitApp():void
                  {
                        for( var x:uint = 1; x <= 500; x++ )
                        {
                              var obj:Object = new Object();
                              obj.Icon = x.toString(); /* Needs to be an icon image */
                              obj.Status = "Pending";
                              obj.DateTime = "11/" + x.toString() + "/2008";
                              obj.Artifact = "Artifact " + x.toString();
                              obj.Owner = "Mark Johnson";
                              obj.MarkedBy = "Rick Gerald";
                              obj.Reason = "Illegal Content"; /* Requires Tool Tip */
                              
                              orgData.addItem(obj);
                        }
                        refreshDataProvider(index);
                        createNavBar(Math.ceil(orgData.length/pageSize));
                  }
                  
                  /* Create pagination */
                  private function createNavBar(pages:uint = 1,set:uint = 0):void
                  {
                        nav.removeAll();
                        if( pages > 1 )
                        {
                              nav.addItem({label:"< Previous",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:"Next >",data:pg + 1});
                              }
                        }
                  
                  /* Refresh data per page groups */
                  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);
                        }
                        
                  }
                  
                  private function refreshDataProvider(start:uint):void
                  {
                        myData = new ArrayCollection( orgData.source.slice((start * pageSize),(start * pageSize) + pageSize) );
                  }
                  
                  /* public static function getDefaultImage(group:String, type:String):Object{
                        var stuff:Array = StyleManager.selectors;
                        var css:CSSStyleDeclaration = StyleManager.getStyleDeclaration("." + getIconStyleName(group) + type);
                        if (css == null)
                              css = StyleManager.getStyleDeclaration(".informationIcon" + type);
                        var img:Object = css.getStyle("borderSkin");
                        return img;
                  } */
                  
                  /* Viewing pages */
                  [Bindable]
                  public var startAlert:uint;
                  [Bindable]
                  public var endAlert:uint;
                  [Bindable]
                  public var totalAlert:uint;
                  
                  private function viewingAlerts ():void {
                        startAlert == ((navPage - 1) * pageSize + 1);
                        endAlert == ((navPage - 1) * pageSize + pageSize);
                        totalAlert == myData.length;
                  }
                  
                  /* private function handleDeptChange():void
            {
                myData.filterFunction = filterStatus;
                myData.refresh();
            }
           
            private function filterStatus(item:Object):String {

            } */
            ]]>
      </mx:Script>

      <mx:Label text="Content Alerts"/>
      <mx:HBox width="100%">
            <mx:Label id="veiwingAlertsLabel" text="Viewing Alerts {startAlert}-{endAlert} of {totalAlert}"/>
            <!--
            <mx:Spacer width="40%"/>
            <mx:Label id="filterByLabel" text="Filter by:"/>
            <mx:LinkButton label="Unprocessed"/>
            <mx:VRule height="20"/>
            <mx:LinkButton label="Processed"/>
            <mx:VRule height="20"/>
            <mx:LinkButton label="All"/>
            -->
      </mx:HBox>
      <mx:DataGrid id="contentAlertDataGrid" dataProvider="{myData}" width="100%" height="100%" verticalScrollPolicy="on" horizontalScrollPolicy="off"/>
      <mx:HRule width="100%"/>
      <mx:HBox width="100%">
            <mx:LinkButton id="viewAllLinkBtn" label="View All"/>
            <mx:VRule height="20"/>
            <mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" width="{contentAlertDataGrid.width}"/>
      </mx:HBox>
</mx:VBox>
</mx:Application>

DIGITALUnderworldAsked:
Who is Participating?
 
evcrConnect With a Mentor Commented:
probably not entirely what you are after but a good starter...
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                        layout="absolute"
                        creationComplete="InitApp()">
 
<mx:VBox width="600" height="400"
             paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
 
      <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();
                  
                  /* Records per page */
                  public var pageSize:uint = 25;
                  /* Number of pages per view */
                  public var navSize:uint = 10;
                  private var index:uint = 0;
                  private var navPage:uint = 1;
                  
                  /* Test data */
                  private function InitApp():void
                  {
                        for( var x:uint = 1; x <= 500; x++ )
                        {
                              var obj:Object = new Object();
                              obj.Icon = x.toString(); /* Needs to be an icon image */
                              obj.Status = "Pending";
                              obj.DateTime = "11/" + x.toString() + "/2008";
                              obj.Artifact = "Artifact " + x.toString();
                              obj.Owner = "Mark Johnson";
                              obj.MarkedBy = "Rick Gerald";
                              obj.Reason = "Illegal Content"; /* Requires Tool Tip */
                              
                              orgData.addItem(obj);
                        }
                        refreshDataProvider(index);
                        createNavBar(Math.ceil(orgData.length/pageSize));
                  }
                  
                  /* Create pagination */
                  private function createNavBar(pages:uint = 1,set:uint = 0):void
                  {
                        nav.removeAll();
                        if( pages > 1 )
                        {
                              nav.addItem({label:"< Previous",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:"Next >",data:pg + 1});
                              }
                        }
                  
                  /* Refresh data per page groups */
                  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);
                        }
                        
                  }
                  
                  private function refreshDataProvider(start:uint):void
                  {
                        myData = new ArrayCollection( orgData.source.slice((start * pageSize),(start * pageSize) + pageSize) );
                  viewingAlertsLabel.text = (start * pageSize).toString() + ' ' + pageSize.toString() + ' ' + orgData.length.toString();
                  }
                  
                  /* public static function getDefaultImage(group:String, type:String):Object{
                        var stuff:Array = StyleManager.selectors;
                        var css:CSSStyleDeclaration = StyleManager.getStyleDeclaration("." + getIconStyleName(group) + type);
                        if (css == null)
                              css = StyleManager.getStyleDeclaration(".informationIcon" + type);
                        var img:Object = css.getStyle("borderSkin");
                        return img;
                  } */
                  
                  /* Viewing pages */
                  [Bindable]
                  public var startAlert:uint;
                  [Bindable]
                  public var endAlert:uint;
                  [Bindable]
                  public var totalAlert:uint;
                  
                  private function viewingAlerts ():void {
                        startAlert == ((navPage - 1) * pageSize + 1);
                        endAlert == ((navPage - 1) * pageSize + pageSize);
                        totalAlert == myData.length;
                  }
                  
                  /* private function handleDeptChange():void
            {
                myData.filterFunction = filterStatus;
                myData.refresh();
            }
           
            private function filterStatus(item:Object):String {
 
            } */
            ]]>
      </mx:Script>
 
      <mx:Label text="Content Alerts"/>
      <mx:HBox width="100%">
            <mx:Label id="viewingAlertsLabel" text="stuff"/>
            <!--
            <mx:Spacer width="40%"/>
            <mx:Label id="filterByLabel" text="Filter by:"/>
            <mx:LinkButton label="Unprocessed"/>
            <mx:VRule height="20"/>
            <mx:LinkButton label="Processed"/>
            <mx:VRule height="20"/>
            <mx:LinkButton label="All"/>
            -->
      </mx:HBox>
      <mx:DataGrid id="contentAlertDataGrid" dataProvider="{myData}" width="100%" height="100%" verticalScrollPolicy="on" horizontalScrollPolicy="off"/>
      <mx:HRule width="100%"/>
      <mx:HBox width="100%">
            <mx:LinkButton id="viewAllLinkBtn" label="View All" click="contentAlertDataGrid.dataProvider = orgData;"/>
            <mx:VRule height="20"/>
            <mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" width="{contentAlertDataGrid.width}"/>
      </mx:HBox>
</mx:VBox>
</mx:Application>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.