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
28 replies on “Flex – Paginated Datagrid”
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.
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.
Nice post and this fill someone in on helped me alot in my college assignement. Gratefulness you seeking your information.
Good article Thank you so much
This is an interesting article. Thanks for sharing.
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?
good share, great article, very usefull for us…thanks!
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
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!
good share, great article, very usefull for us…thanks!
Was an interesting article, thank you..
Ciao that stuff is nicely written are you a professional writer ? Maybe i could hire you to post for me?
Not a professional writer 🙂 Jus posting in my views !
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.
@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 !
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?
@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 !
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
I’ll post in a way to add a ‘search box’ in there when I’m free.. Will ping you… Thanks for your inputs 🙂
Hello Immanuel,
I hope you can help me with the searchbox.
Thanks anyway, regards Wout
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!
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
@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 !
@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
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
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 …………………
Good to know you got it working Guru.
Datagrid support labelfunction?
im need to format dates