[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Datagrid pagining with count

Posted on 2008-11-13
1
Medium Priority
?
2,997 Views
Last Modified: 2012-08-14
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>

0
Comment
Question by:DIGITALUnderworld
1 Comment
 
LVL 7

Accepted Solution

by:
evcr earned 150 total points
ID: 22956291
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

Featured Post

Sign your company up to try the MB 660 headset now

Take control and stay focused in noisy open office environments with the MB 660. By reducing background noise, you can revitalize your office and improve concentration.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
MSSQL DB-maintenance also needs implementation of multiple activities. However, unprecedented errors can hamper the database management. In that case, deploying Stellar SQL Database Toolkit ensures fast and accurate database and backup repair as wel…
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question