DIGITALUnderworld
asked on
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="of f">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollec tion;
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(org Data.lengt h/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:ItemCli ckEvent):v oid
{
refreshDataProvider(event. item.data) ;
var lb:String = event.item.label.toString( );
if( lb.indexOf("<") > -1 || lb.indexOf(">") > -1 )
{
createNavBar(Math.ceil(org Data.lengt h/pageSize ),event.it em.data);
}
}
private function refreshDataProvider(start: uint):void
{
myData = new ArrayCollection( orgData.source.slice((star t * pageSize),(start * pageSize) + pageSize) );
}
/* public static function getDefaultImage(group:Stri ng, type:String):Object{
var stuff:Array = StyleManager.selectors;
var css:CSSStyleDeclaration = StyleManager.getStyleDecla ration("." + getIconStyleName(group) + type);
if (css == null)
css = StyleManager.getStyleDecla ration(".i nformation Icon" + 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="of f"/>
<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(ev ent)" dataProvider="{nav}" width="{contentAlertDataGr id.width}" />
</mx:HBox>
</mx:VBox>
</mx:Application>
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"
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollec
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(org
}
/* 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:ItemCli
{
refreshDataProvider(event.
var lb:String = event.item.label.toString(
if( lb.indexOf("<") > -1 || lb.indexOf(">") > -1 )
{
createNavBar(Math.ceil(org
}
}
private function refreshDataProvider(start:
{
myData = new ArrayCollection( orgData.source.slice((star
}
/* public static function getDefaultImage(group:Stri
var stuff:Array = StyleManager.selectors;
var css:CSSStyleDeclaration = StyleManager.getStyleDecla
if (css == null)
css = StyleManager.getStyleDecla
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):
} */
]]>
</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="of
<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(ev
</mx:HBox>
</mx:VBox>
</mx:Application>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.