“Filter results in DataGrid” Flex Tutorial

April 29th, 2008 at 10:21pm Administrator

If you're new here, you may want to subscribe to my RSS feed. If you like my site, consider linking back. I prefer text "Free Flash Tutorials" to http://blog.franto.com
Thanks for visiting my site! If you need anything just contacting through Contact page or Gtalk widget

Table of contents for DataGrid

  1. Custom header in DataGrid
  2. Custom header in DataGrid - part 2
  3. “Filter results in DataGrid” Flex Tutorial

This is new post in my DataGrid Series Flex Tutorials. This tutorial shows you how to filter rows for searched keyword. It's quite easy, since dataProvider for DataGrid is ArrayCollection, and ArrayCollection has variable filterFunction. It simple expect function which will filter correct rows for you. So basically, you have Datagrid and dataProvider is defined like this

PLAIN TEXT
Actionscript:
  1. [Bindable] public var dpRows:ArrayCollection;

then you can create filter function in this simple way:

PLAIN TEXT
Actionscript:
  1. public function filterResults():void
  2.  {
  3.     dpRows.filterFunction = _sortRows;
  4.     dpRows.refresh();
  5. }

and finally function, which filters results. It returns true for row, which will be visible, and false for row which will be hiden.

PLAIN TEXT
Actionscript:
  1. private function _sortRows(item:Object):Boolean
  2. {
  3.             var col:String = cmbCol.selectedItem.data as String;
  4.             var key:String = keyword.text;
  5.            
  6.             key = key.toLowerCase();
  7.            
  8.             if (key != "")
  9.             {
  10.                 if (col != "any")
  11.                 {
  12.                     var value:String = item[col];
  13.                     value = value.toLowerCase();
  14.                    
  15.                     if (value.indexOf(key)>= 0)
  16.                     {
  17.                         return true;
  18.                     }
  19.                 } else {
  20.                     for (var o:String in item)
  21.                     {
  22.                         value = item[o];
  23.                         value = value.toLowerCase();
  24.                         if (value.indexOf(key)>= 0)
  25.                         {
  26.                             return true;
  27.                         }
  28.                     }
  29.                 }
  30.             } else {
  31.                 return true;
  32.             }
  33.            
  34.             return false;
  35. }

It's quite simple tutorial. Here you can see source code for example which follows.

ArrayCollection filterFunction example screenshot

In next tutorial for DataGrid I will show you how you can add Button into cell. We will use custom itemRenderer for DataGridColumn.

If you have any questions, or suggestions for tutorial, please let me know...

Enjoy.

, , , , , , ,
AddThis Feed Button
Previous in series

Entry Filed under: Tutorial, tutorials, Macromedia Tips, AirTips, FlexTips, Flex, AIR, Flash


Do you want to receive fresh news from my site?
Subscribe to my RSS

»Related posts:



2 Responses to ““Filter results in DataGrid” Flex Tutorial”

  1. 1
    Yulia Says:
    April 30th, 2008 at 3:17 pm

    Hi,
    I’m interested in buying links from your blog
    Please contact me by email
    Thanks

  2. 2
    Tink Says:
    May 2nd, 2008 at 5:19 pm

    You might find the following useful too

    http://www.tink.ws/blog/filtereddatagrid/

    I implemented it this way as I was using the same ArrayCollection in more than one place, and I needed each to be filtered in a different way, without affecting the other (i.e. not affecting the original data).

Leave a Reply