Datagrid pagination

Before we can start we must define a data service that contains for our example an operation 'dbList' with following input and output types:

Input Types:

start:Number
limit:Number

Output Types:

<data>
    <action>list</action>
    <total>...</total>
    <items>
        <item>...</item>
        <item>...</item>
    </items>
</data>

The pagination component can be used very easily:

<wakcompsdata:PagingToolbar
    dataService="{dataService}"
    limit="10"
    showLabels="true"
    textDisplayingLabel="Displaying {0} - {1} of {2}"
    textPageLabel="Page"
    textPageOfLabel="of {0}"
    buttonFirstPageLabel="First"
    buttonLastPageLabel="Last"
    buttonNextPageLabel="Next"
    buttonPreviousPageLabel="Previous"
    visibleElements="..."
    loadData="actionLoad()"
    loadDataEnhanced="actionLoadEnhanced()"
/>

Attribute: dataService
If you assign a data service then the component add an event listener for the ResultEvent. Everytime the ResultEvent occurs the component will refresh labels and enables or disables buttons depending of the result.

Attribute: limit
Defines how many rows per page will be listed. Default value is 10.

Attribute: showLabels
Defines if labels of buttons should be show or not. Default value is false.

Attribute: xxxLabel
Defines the text of labels and buttons. These attributes are bindable so that you can easily establish multi language support by using the resource manager.

Attribute: visibleElements
All elements can be individual shown or not. Default value is show all elements:

visibleElements = (
     ELEMENT_BUTTON_FIRSTPAGE
  |  ELEMENT_BUTTON_PREVIOUSPAGE    
  |  ELEMENT_BUTTON_NEXTPAGE
  |  ELEMENT_BUTTON_LASTPAGE
  |  ELEMENT_BUTTON_RELOAD
  |  ELEMENT_TEXT_PAGE
  |  ELEMENT_TEXT_PAGEOF
  |  ELEMENT_TEXT_DISPLAYING
  |  ELEMENT_STEPPER
);

Event: loadData
This event is fired if a button was clicked. To request new data you must define an event handler that executes the 'dbList' operation of our data service:

protected function actionLoad():void
{
     listResult.token = dataService.dbList(pagingToolbar.start, pagingToolbar.limit);
}

Event: loadDataEnhanced
This event is fired if the refresh button + 'CTRL' key was clicked.

Example:
A running example could be found here: http://woocoom.net/flashbuilder/demo_application/