How to filter multiple extjs grid columns?

Question

To filter one grid column we can use:

{
     xtype: 'button',
     text:'Search',
     handler:function(){

        store.clearFilter();
        var searchValue = Ext.getCmp("textFieldId").getValue();
        store.load().filter('GridFieldName', searchValue);

     }                   
}

but how to search multiple fields at once, something like:

{
    xtype: 'button',
    text:'Search',
    handler:function(){

        store.clearFilter();
        var searchValue = Ext.getCmp("textFieldId").getValue();
        store.filter([
           {property: "GridFieldName", value: searchValue},
           {property: "GridFieldName1", value: searchValue}
        ]);
    }                   

}

any ideas?

EDIT:

The weird thing is that in both cases, only single search works:

This works:

store.filter([
      { property: "FirstName", value: searchValue }
]);

and this works:

var FirstNameFilter = new Ext.util.Filter({
   property: "FirstName", value: searchValue
});

store.filter(FirstNameFilter);

but this does not:

store.filter([
      { property: "FirstName", value: searchValue },
      { property: "LastName", value: searchValue }
]); 

or does this:

 var filters = [
     new Ext.util.Filter({
          property: "FirstName", value: searchValue
     }),
     new Ext.util.Filter({
          property: "LastName", value: searchValue
     })
 ];
 store.filter(filters);

Solution 1

Try to create instances of Ext.util.Filter like this:

var filters = [
 new Ext.util.Filter({
  property: "GridFieldName", value: searchValue
 }),
 new Ext.util.Filter({
  property: "GridFieldName1", value: searchValue
 })
];
store.filter(filters);

Alternatively, you can create single filter with custom logic:

var filters = [
     new Ext.util.Filter({
      filterFn: function(item){
         return item.get('GridFieldName') == searchValue && item.get('GridFieldName1') == searchValue;
      }
     })
];
store.filter(filters);

Solution 2

I found this post while searching for a way to filter on multiple columns (actually ALL columns) with OR logic. (so the search-clause matches column A OR matches column B etc.) I ended up filtering with a custom filterfunction like:

...
var regex = RegExp('Insert searchclause here', 'i');
store.filter(new Ext.util.Filter({
    filterFn: function (object) {
        var match = false;
        Ext.Object.each(object.data, function (property, value) {
            match = match || regex.test(String(value));
        });
        return match;
      }
}));

HTH

Solution 3

    store.clearFilter();
    var searchValue = Ext.getCmp("textFieldId").getValue();
    if (!!searchValue) {
        var filters = [
             new Ext.util.Filter({
                 filterFn: function (item) {
                     return item.get('FirstName').toLowerCase().indexOf(searchValue.toLowerCase()) > -1                                 
                         || item.get('LastName').toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
                 }
             })
        ];
        store.filter(filters);
    }

This is my code which apply from Pavel.
For my work which search Multi-column, Non-case sensitive, Ignore position by OR logic.

Hope this help.

Solution 4

That should work. Is it not? As I understand it if you apply filters as you have shown, it should filter by both criteria.

store.filter([
   {property: "GridFieldName", value: searchValue},
   {property: "GridFieldName1", value: searchValue}
]);

As an alternative you should be able to use the setFilter function to add new filters.

store.setFilter("GridFieldName",  searchValue)
store.setFilter("GridFieldName1",  searchValue)

If you use setFilter with no arguments it should just reapply the filters you have previously defined. They are only removed if you call clearFilter.

View more solutions

Comments

[svenlol]

Which one filtered, firstName or LastName?

[Davor Zubak]

well, none if you put both filters, only works with one, i need to lets say, filter whole json for searchValue, so i need multiple filters on multiple columns?

[Bill Garrison]

Not only did the OP mention that this does not work but I am using 3.2 (being forced to) and Ext.util.Filter doesn't exist. Any suggestions?

[Dharmesh Hadiyal]

hello this code filter check both field if both in available then and then return result

[Dharmesh Hadiyal]

i need if any one field in find then return i try "||" but it's not working