R – Filter a dataGrid with a comboBox in flex

apache-flexcomboboxfiltering

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.

Best Answer

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();
}