Flex – Paginated Datagrid

Here is a small component i wrote for implementing a paginated Datagrid on flex.
This component extends dataGrid, displaying only a set of records at a time, thereby organizing the entire collection into ‘pages’.
This component arranges the collection specified under the ‘dataProvider’ attribute into ‘pages’.

  • Displays a footer at the bottom
  • Indicates currently displayed records
  • 2 navigation buttons (Previous, Next)

Here is how you add the control,
Replace the dataGrid tags with the one specified below.
Ofcourse, ‘component’ points to the directory ‘pagedDatagrid.as’ component exists in. If your using the component as is, its xmlns:component=”com.immy.*”

<component:paginatedDatagrid  pagination=true limit=100…..>

Two additional attributes have been added,
Pagination (Boolean) : Indicates whether pagination is required. false allows the datagrid to function as the default datagrid.
Limit (Number): Number of records displayed on each page.

Tested for arrayCollection dataProvider’s on Flex 3 and Flex 4.

View Demo
View Source

— Update 04/07/2010 —

Updates :
paginatedDatagrid now implements a method to return the currently selected index.
itemSelected (returns Number): Returns the current selectedIndex irrespective of the selected ‘Page’.

ASDocs Documentation now included

Flex Cairngorm - Interacting with a Command, through an Event

28 Responses to “Flex – Paginated Datagrid”

  1. Nowadays, Graphic designing is incomplete without Actionscript. Graphic design firms design attractive web pages with the help of Actionscript. Flash graphic design is also used for creating corporate logos. You may have seen corporate animated logos. Well, the brilliant design certainly goes to some excellent Actionscript programming skills.

  2. Over the last couple of years, Flash has gained a strong foothold in the online video industry. One of the greatest appeals of Flash is that it is compatible across all platforms. All you have to do is install a simple plugin, which usually comes with most browsers anyways. And now, with video becoming so prevalent on the web, the Flash Video format (FLV) is becoming the preferred format. Websites like YouTube.com are now using the FLV format for their videos, because with FLV files, you don’t have the same compatibility issues that you might encounter with AVI, MPEG, or MOV files.

  3. Nice post and this fill someone in on helped me alot in my college assignement. Gratefulness you seeking your information.

  4. StronLink

    This is an interesting article. Thanks for sharing.

  5. hi there
    i’m so pleased that i found this page. that posting was so nice. thanks again i bookmarked this website.
    are you planning to post similar articles?

  6. Imableadola

    Just want to say what a great blog you got here!
    I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!

    Thumbs up, and keep it going!

    Christian, Satellite Direct Tv

  7. Came to this site by Google looking for answers on embedding maps on my page and just wanted to say thank you for your help!

  8. good share, great article, very usefull for us…thanks!

  9. Ciao that stuff is nicely written are you a professional writer ? Maybe i could hire you to post for me?

  10. @Cedric Agreed ! Pagination with pre-loaded data definitely doesn’t belong to the RIA world. I’ve gone off-track with the actual implementation, Pagination via service, which is similar to the link you just posted.

    Hope to put up the complete source soon !

  11. Hello,
    I use the paginator for a datagrid filled from database.
    Is there a way to filter the grid with a textInput and combine it with the paginator?

  12. @Wout, Definately 🙂 If you are using the Datagrid Paginator component above, all u need to do is add a child textInput component under the createChildren() method, ‘filter’ the ‘datagrid.dataProvider’ collection on the ‘change’ event of the newly created textInput.

    Let me know if you have any issues with that !

  13. Wout den Teuling

    Hello Immanuel, thank you for the reply.
    Sorry for my English, I’m from the Netherlands.

    You can see what I made with your paginator on http://www.huisinspanjekopen.nl/test/index.html
    The refresh button on the bottom works well with the paginator(it gets all de listings).

    In the main mxml I have put a datagrid to refer to your pagedDatagrid. The ID from the datagrid is pagedDG and the dataprovider is contactsDP. It’s filled from database with zend and php.

    I have to make 5 search options competable with the paginator. I’m not so familar with flex so if you can drop a peace of code it would be greatful.

    Anyway, thanks

  14. I’ll post in a way to add a ‘search box’ in there when I’m free.. Will ping you… Thanks for your inputs 🙂

  15. Wout den Teuling

    Hello Immanuel,
    I hope you can help me with the searchbox.
    Thanks anyway, regards Wout

  16. Fabio

    Hi Immanuel,
    would also be helpful to have the ability to sort the column based on the entire list and not just the single page view. Do you know if someone has already enabled this feature? Quick glance at the code I need to change the filter () method of PaginatedDatagrid.as. Thanks in advance!

  17. Hi,
    Thanks for sharing this nice component.

    I was just wondering, there’s seems to be a bit of drop(footer) when you scroll down the datagrid.


  18. @clyde, Yes. Thats a bug 🙂 The info bar at the bottom gets re-positioned to ‘provide space’ for the last itemRenderer. The best option would be to calculate the total height required for itemRenderer’s, and position the info bar correctly at first go !

  19. @Fabio, You are correct. The filter() method needs to be modified. I am not aware of anyone who has implemented it, but it would require sorting contents of the main dataProvider and adapting the datagrid accordingly

  20. how to do the same datagrid paging methods using webservices but in my case I have a recordcount method, which returns the total number of records and one that returns an ArrayCollection where you control the rate of the site and the number of items from as many thanks to anyone who can help

  21. Thank you very much ………I tried this example with pagination = “false” . It shows some error at first
    Then i made change in set dataprovider else condition to super.dataProvider = value. It is working fine
    Thank you …………………

  22. Datagrid support labelfunction?
    im need to format dates

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>