Advanced Paging and Filtering in Flex Datagrid


adobe_flex_logoWell there are some blogs and sites where you can find an example about paging on a datagrid or advanced datagrid.

There are also a lot of blogs about filtering on flex datagrids or flex AdvancedDatagrid.

But… there are no examples about paging AND filtering on flex Datagrids or Flex AdvancedDatagrids.

Now there is !


When I was working on a sollution for paging a big amount of information in a flex Project the people I was building it for asked me if it was possible to keep the filtering functionality in.

At first I thought it was not possible. But….. after a good evening at trying, coding and testing at home I had succes and paging and filtering on a Adobe Flex Datagrid (or AdvancedDatagrid) is possible.

There is only one big issue, on a big amount of row’s it can become slow.

Right Click to see the source code

Theo van der Sluijs

Theo van der Sluijs (1975) is Software Development Manager at Bax-shop.nl. You can read more in dutch on his “Dutch Blog“, he also created Gebruikmaar.nl. He is a member of the Board of the Dutch Flex Usergroup and Goesweb.net.

Google+ Twitter LinkedIn 



VN:F [1.9.13_1145]
Rating: 8.2/10 (225 votes cast)
VN:F [1.9.13_1145]
Rating: +45 (from 53 votes)
Advanced Paging and Filtering in Flex Datagrid, 8.2 out of 10 based on 225 ratings

Related Posts

35 comments

  1. Kumar Keswani

    this is nice! how can we achieve this if the data is coming from a webservice?
    thanks

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
    • Here you can find an example: http://blog.flexmaniak.pl/flex_i_php/pagination-d…

      VA:F [1.9.13_1145]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.13_1145]
      Rating: 0 (from 0 votes)
      • Great but where is the filtering ? By the way, 1000 items should not crash the app. I worked with datagrids with over more than 20.000 items. Tru PhP

        VN:F [1.9.13_1145]
        Rating: 0.0/5 (0 votes cast)
        VN:F [1.9.13_1145]
        Rating: 0 (from 0 votes)
        • I didnt mean 1000 of items but thousands like 100 thousands or even more.

          Filtering is not implemented yet, Im working on new – better – version (more flexible :) ).

          Im just trying to port extJS DataGrid to Flex :)

          Unfortunately I dont have much time lately :/

          VA:F [1.9.13_1145]
          Rating: 0.0/5 (0 votes cast)
          VA:F [1.9.13_1145]
          Rating: 0 (from 0 votes)
  2. It depends on how you want to get the data. I you get all the data in one single call you can use this script. If you want to recall on paging or filering you will have to do some recoding.

    VN:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.13_1145]
    Rating: +1 (from 1 vote)
  3. Can anyone post a Paging example on a advanced datagrid which has grouped data..Will be of great help..thnx in advance

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  4. 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.

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: -2 (from 2 votes)
  5. How do i change data-provider form for loop become my own xml data file.

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: -1 (from 1 vote)
  6. Hi,

    Fantastic app. I'm struggling with one additional item and wondering if you would have any idea how to:

    1) use an external xml file

    2) reload that same xml file every 5 minutes

    Thanks again,

    Todd

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  7. Does it read data from the first page only and when you click to go on the second page, it load the query for the second page? im looking an example like this. anyone?

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: -1 (from 1 vote)
    • No, that would be only possible if you would do a server side filtering.

      VN:F [1.9.13_1145]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.13_1145]
      Rating: 0 (from 0 votes)
  8. Thanks for the great and simple code on pagination compared to others out there, you rock :)

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  9. is there a way to add a button in a column to the datagrid rows which takes an action with the row data? Thanks

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  10. Thank you very much for the awesome share. I had spent almost one night to build a paginated advanced datagrid, but it didn't work. After checking your code, I found out my error, and as a bonus got data filtering :)

    Thanks again. keep up the good work :)

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  11. We've added a whole lot of features to our grid – Please look at http://www.flexicious.com Filter, Paging, Footer, CheckBox Selection, Print, Print Preview, PDF Export, Excel/Word/Html Export and preference persistence.

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 2 votes)
    • So now that I've put this "advertisement" of flexicious here the second time on my blog, it's about time I get a free version, right ?

      VN:F [1.9.13_1145]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.13_1145]
      Rating: 0 (from 2 votes)
  12. paulo Jbrazil

    Hi

    Can't download the code?

    please

    can you send me by e-mail?

    Thanks

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  13. filterVANm() Where's the function that does the filtering? THAT's where I'm stuck. InitApp(), too.

    ???????????

    The MXML reveals nothing about how to do the filtering.

    Or I'm dense, since everyone else is raving about this post.

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  14. all the functions are in globalscript.as file.

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  15. its nice and good work. ok. i have a problem here to exprot the dataGrid as it into pdf file. plz help me if anyone know about its.

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  16. if i wanna look forward from the back of the data,

    i think convenient

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  17. Pretty much what I was looking for. THanks for sharing it :)

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  18. rs.result.setDeliveryMode(mode String, pagesize Number, prefetchPage Number)

    setDeliveryMode is a very very simple method to do client data paging (lazy loading) in Flex 2. I don't know why it is no longer supported in Flex 3. Does anyone know about this?

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  19. Really great job. It helps a lot to every one who goes for pagination in Datagrid.

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  20. thai lam

    many many thanks

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  21. can i hv source for this?
    thanks

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  22. greattttt

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  23. amod g

    Many thanks. Can we put the code of globalScripts.as in some class? I tried putting it but didn't work. I was getting an error Data binding will not be able to detect assignments to "…" while providing the dataprovider in the linkBar

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  24. Actually this solution sucks as it sort only visible page… It's done almost out of the box. Sorting whole collection is a challenge.

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
    • iamboredsoiblog

      Wow, thank you very much for that great response. As you can see this Article created like more than 2 years ago. I think there are much more and better sollutions for this.

      However, You\’re not giving us one. You just bash on it.

      VN:F [1.9.13_1145]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.13_1145]
      Rating: 0 (from 0 votes)
  25. Great pagination system. I had one that no matter how much data you had it will still say 10 pages of data. I replaced it with your system and it works.. still have a few bugs to work out but it's still works for the most part. I created my own filters functions because I have so many different ways that the users need to filter. I used returned data from HTTPSERVICE using PHP Json Arrays. I know this is quite old but it still a useful article

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  26. Thanks a lot ….

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)
  27. Really great work.hats off to u.i have been trying this more than a day.thanks yaar.

    VA:F [1.9.13_1145]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)

Trackbacks/Pingbacks

  1. Joomla! to Wordpress | I am Bored So I Blog - [...] http://www.iamboredsoiblog.eu/2009/01/10/advanced-paging-and-filtering-in-flex-datagrid/ [...]
  2. やせ蛙 まけるな一茶 是にあり » AdvancedDataGrid - [...] http://corlan.org/2008/08/19/paging-a-data-grid-on-the-client/ http://www.iamboredsoiblog.eu/2009/01/10/advanced-paging-and-filtering-in-flex-datagrid/ http://gurufaction.blogspot.com/2007/02/flex-datagrid-paging-example-with.html カテゴリー: [...]
  3. James's Blog! » Blog Archive » Sorting a paginated DataGrid - [...] working solution – I did this quickly so it may not be perfect. The pagination was done using this ...

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes