Categories
Flex

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

Flex Cairngorm - Interacting with a Command, through an Event

By Immanuel Noel

A techie at heart. Works with Adobe at Bangalore, India. Currently do DevOps. Been a part of the ColdFusion Engineering, Flash Runtime Engineering, Flash Builder Engineering teams in the past. Was a Flash Platform Evangelist, evangelizing the Adobe Flex platform. Spoke at numerous ColdFusion / Flash and Flex tech conferences. This blog is a collection of some of my strides with technology.

More on me on the home page

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.

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?

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

@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

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

Leave a Reply

Your email address will not be published. Required fields are marked *