Flex – Paginated Datagrid

Written by

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…..>

<component:columns>

…

…

</component:columns>

</component:paginatedDatagrid>

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
Download

— 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
Documentation

Comments

28 responses to “Flex – Paginated Datagrid”

March 30, 2010

Boyce Bannan

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.
April 7, 2010

Hassan Battani

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.
April 9, 2010

ala234l

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

LeBron James

Good article Thank you so much
April 18, 2010

StronLink

This is an interesting article. Thanks for sharing.
May 16, 2010

Gewinne

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?
May 17, 2010

Christian Louboutin

good share, great article, very usefull for us…thanks!
May 20, 2010

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!

Cheers
Christian, Satellite Direct Tv
May 26, 2010

Robby Mitsuda

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!
June 5, 2010

Amy

good share, great article, very usefull for us…thanks!
June 9, 2010

Christian Louboutin

Was an interesting article, thank you..
June 30, 2010

Cettitonefs

Ciao that stuff is nicely written are you a professional writer ? Maybe i could hire you to post for me?
July 2, 2010

Immanuel Noel

Not a professional writer 🙂 Jus posting in my views !
December 31, 2010

Cedric

Pagination belongs to html and seo world. In Flex (application) there is a much clever solution using only the scroll bar. Check this out:

http://stefanonflex.blogspot.com/2009/11/implicit-data-paging-in-flex-3.html

Worked like a charm for me.
January 1, 2011

Immanuel Noel

@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 !
January 15, 2011

Wout

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?
January 15, 2011

Immanuel Noel

@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 !
January 17, 2011

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
January 18, 2011

Immanuel Noel

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

Wout den Teuling

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

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!
August 12, 2011

clyde

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.

Thanks
August 13, 2011

Immanuel Noel

@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 !
August 13, 2011

Immanuel Noel

@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
November 3, 2011

edgar

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
July 12, 2012

Guru

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 …………………
July 15, 2012

Immanuel Noel

Good to know you got it working Guru.
May 17, 2014

eLe

Datagrid support labelfunction?
im need to format dates