Paging a Data Grid on the client

My wife says that lately I have become obsessed, with data grids. Well, who am I kidding? While my wife is a psychologist and she does care about obsessions, she doesn’t care about Flex components. Anyway, the first time I saw a Flex data grid filled with items I asked myself: “What if I need to display more than 20 rows of data at the same time?” What visual hints, what UI should I use, to give the viewer a sense of what items he is looking at, how many there are left to see, and so on. Let’s take a look at it; here’s a data grid filled with a lot of data:

When I was a web developer with InterAKT Online, I worked on a product called NeXTensio list. This product was an extension for Dreamweaver, and it was used for generating lists from a table or from a query, and it provided navigation buttons and other visual items to help you view and edit the list items.

So, it is no wonder that, as soon I had some time to play, I started to build a Flex component that adds some interesting behavior to a data grid. You can see here the whole thing put it together, and you can download the project from here (in the root of the ZIP file there is a readme.txt file that explains how to setup the project). About my application:

using a HTTPService, it reads all the data from the database; my example uses a MySQL table with 5.000 rows
it displays the data using a data grid
users navigate through the data grid using my custom component; the component adds buttons for navigating from page to page (where a page is the number of items you can view at the same time in the data grid), or you can directly navigate to the last/first page
my custom component display some statistics on top of the navigation buttons (so you know what dataset are you looking at, and how many items there are)
you can use the data grid toolbar, and in this case as you move around, the buttons and statistics are updated (just use the mouse or the keyboard to scroll the data grid, and you will see the buttons changing)

Here is a screen shot of the application:

How did I do it? Well, it wasn’t hard, but neither was it easy. The whole paging component is a custom Flex component (see the Paging.mxml file). All it needs is a reference to the data grid to which you want to add paging. You can configure how many buttons to render at the same time for moving through pages (I used 5 in my example). The trickiest part was to find how many items are displayed at one time in the data grid. When a data grid is initialized, the property rowCount from the data grid is 7, regardless of how many items are in the data grid. So, I need to have a listener registered on the data grid that it is triggered when rowCount changes. Because I couldn’t find an event for this, I ended up extending the data grid (see the MyDataGrid.mxml file) and I over-wrote the method setRowCount, to dispatch an event when rowCount changes.

For the rest of the story, have a look at the code and play with it. But please, don’t forget it isn’t production quality code, it’s just a proof of concept. Have fun!

August 19, 2008 | Filed Under Flex, PHP

Comments

RSS feed for comments on this post.

10 Responses to “Paging a Data Grid on the client”

1. Wouter on June 3rd, 2009 12:47 am

Hello,
How can I make Columns in the datagrid visible or not visible?
Thanks,
Wouter from the Netherlands
2. Andrew Skorik on June 8th, 2009 12:11 pm

What about non explicit height of DataGrid? :)
3. ay on June 30th, 2009 9:44 pm

ay, nice try…….. but it’s still kind of slow when loading 700 records into it ;)

AMFPHP IS VERY FAST ON TRANSFER….. so the bottle neck is the drawing/rendering of the datagrid’s content.

*DAMN-iT!* ;)

somewhere someone mentioned there will be real paging…

THANK U
4. Mihai Corlan on June 30th, 2009 10:41 pm

@ay

Actually the rendering takes very little because the datagrid actually uses a number of the item renderers equaled (or maybe a few more) with the number of visible rows. So there is no way to have 700 rendered items at the same time, unless you have a very big datagrid that can display all the items at the same time.

Yes, with the Flash Builder 4 (the beta of the next Flex Builder product) there is support for paging. The requirement is to have a PHP class that has the getItems method signature like this :
getItems(index, noOfElements). I will write a short tutorial on this, but you can go to http://labs.adobe.com and download Flash Builder 4 and play with it.

PS
5. andrew skorik on September 30th, 2009 3:31 pm

little example of my job in this direction

flashmad.freevar.com/extadg/ExtADGTest.html

right click to test grid settings
6. Flexicious on December 3rd, 2009 4:19 am

Please look at http://www.flexicious.com http://www.flexdatagrid.com. Its a component that handles server and client paging in addition to a lot of other features.
7. shri on February 1st, 2010 7:52 pm

Hi Mihai,

I am using – pagination using data management feature of LCDS.

I have a problem in sorting the data in data grid. When I do sorting in datagrid, it does the sorting for the same page only and not for the entire data.
My question is – Can we pass parameters in service.fill method? Please help.

Thanks in advance.
8. zehni on February 11th, 2010 11:18 pm

hi,
i have to apply pagination to a datagrid which the dataprovider is an e4x.

have an idea about it?

thanx
9. ced on May 24th, 2010 8:33 am

This is a very “html legacy” solution, with page numbers, go to next page, etc… (looks like google)

For Flex I think there is more modern solutions, using only the scrolling bar. Here an example:
http://www.badongers.com/blog/?p=73

I think there is a new built in wizard to create this kind of code in Flash Builder.
10. ntaka on June 18th, 2010 5:35 pm

hi
nice post.i have a similar post as well.check it out
http://ntaka.comuf.com/flex/flex-pagination