Filter a dataGrid with a comboBox in flex

Question

How can I filter a datagrid based on the value in the combo box? Can anyone show me some good examples on it?

In my application, I already filter a datagrid based on the text entered by the user. I check if the entered string matches the column entry of the datagrid and if a match is found,the filterFunction on the dataprovider is called. All this I did with the help of a tutorial only, as I'm learning flex as I do my project.

This is that code:

<mx:FormItem direction="horizontal">
    <mx:ComboBox id="searchCriteria1" dataProvider="{criteriaDP1}" change="searchFunction()"/>
    <mx:TextInput id="search" change="searchFunction()"/> 
    <mx:Button label="Clear Search" click="clear()" /> 
</mx:FormItem> 

private function searchFunction():void{
defectList.filterFunction = filterItems;
defectList.refresh();
}

private function filterItems(item:Object):Boolean
{
var isMatch:Boolean = false   

     if(searchCriteria1.selectedItem.label == "Defect Id")
{ 
 if(item.defId.toString().search(search.text.toString()) != -1)
 {
  isMatch = true
 } 
}
else if(searchCriteria1.selectedItem.label == "Review Id")
{
 if(item.revId.toString().search(search.text.toString()) != -1)
 {
  isMatch = true
 } 
}
     return isMatch;  

}

Here defectList is the dataprovider to the Data Grid, revId,defId are the columns of the data grid .

Now how do I filter, with combo boxes. I have a combo box called "priority" with values "high","medium","low","all". If I select all,no filtering is done. If I select "high" only those fields with priprity column value as "high" should appear.

EDIT I even tried like this:

 if(searchCriteria2.selectedItem.label=="Priority")
 {
      if (item.revType.toLowerCase().search(searchCriteria.selectedLabel.toLowerCase()) != -1)
 {
              Alert("yes");
 isMatch=true
 }
 }

searchCriteria is the comboBox,where I have the items, "ALL","HIGH"... I have two rows with value "high" and I get the Alert "yes" for two times only.. But in the data grid all the four rows are displayed.

Answer 1

You appear to be searching on the revType column, rather than the Priority column.

It may be worth finding a way to reduce the amount of duplicated code in your app to help avoid bugs like this. For example, your list of fields could look like this:

[Bindable]
var criteriaDP1:ArrayCollection = new ArrayCollection([{label:"Review ID", value:"RevID"},
                                                       {label:"Defect Id", value:"DefID"}]);

Setting it up like that would let you use the value field as an index on your dataProvider, like this:

public function search_clickHandler():void
{
 defectList.filterFunction = function(item:Object):Boolean
 {
  var gridValue:String = item[searchCriteria.selectedItem.value].toString().toLowerCase();
  var searchValue:String = search.text.toLowerCase(); 
  if(gridValue.search(searchValue) != -1)
  {
   return true;      
  }
  return false;
 };
 defectList.refresh();
}