multiple filters outside of the grid

[Eli]

Hi.

I have a few search fileds (text, kendoDropDownList, kendoMultiSelect) just above my grid.

Each change of such a search field changes the dataSource.filter of the grid in my "change" function.

I have a problem with the combination of the filters.

 

For example:

choosing "a" as a "status" in the kendoDropDownList will bring all the records with status "a".

If after selecting "a" as a "status" I select "b" as a "type" in another kendoDropDownList I want to get

all the records with "status" "a" and "type" "b".

If after that I change the selection of "a" to "c" I want to get all the records with "status" "c" and "type" "b" 

(removing the filter of "status" "a" and adding the filter of "status" "c" and "type" "b")

 

If I create a new filter in the "change" function and do:

dataSource.filter(newFilter)

I lose the filters I had before.

 

If I do:

var base = dataSource.filter();

newFilter = {logic: "or", filters: [...]};

base.filters.push(newFilter);

dataSource.filter(base);

I could get something like "status = 'a' and status = 'b'", and that's not what I want..

 

I would be happy to get help with that.

 

Thanks,

Eli.

[Viktor Tachev]

Hello Eli,

In order to use the values from all external widgets to filter the data I would suggest creating a combined filter. The structure of such complex expression can be seen in the stackoverflow thread below:

• https://stackoverflow.com/a/37866838

Give the approach a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[Eli]

Thanks.

I understand this approach.. I guess you're right,

but I've already made something else that works (it was not easy..).

 

Whenever a search field changes I create its filter with addition of "type" attribute, for example:

var filter = {
              type: "freeText",  
              logic:"or",
              filters:[
                {field:"name", operator:"contains",value:q},
                {field:"email", operator:"contains",value:q}            
                ]
            };

 

Before I add it to the main filter (configured with "and") I remove the old filter of this field, like this:

 

function removeFilter(type)
    {        
        var base = dataSource.filter();        
        $.each(base.filters, function(i, v) {            
            if (v.type == type) {                                                                         
                base.filters.splice(i, 1);
                return false;
            }
        });     
        return base;   
    }

 

I insert the new filter like this:

base.filters.push(filter);

dataSource.filter(base); 

 

Do you think there is a problem with that kind of solution?

 

Thanks,

Eli.

[Viktor Tachev]

Hi Eli,

If the approach works for your application you can use it as is.

With that said, I can suggest an implementation that is a bit different. When the users enter a value in one of the widgets used for filtering get the values from this and all other filter inputs. Create a JSON for the filter that will be applied to the Grid. Then call the filter method. Note that clearing the previous filter is not necessary. When passing an argument to the filter method the previous filters will be ignored. 

In case you would like to merge the latest filters with the ones already applied to the Grid I would suggest calling filter() with no arguments to retrieve the filter that is applied. Since the result will be a JSON you can merge the two objects as described in the stackoverflow thread below:

• https://stackoverflow.com/questions/18498801/how-to-merge-two-object-values-by-keys

The new JSON that is produced from merging the filters can be applied with the filter() method. 


Regards,
Viktor Tachev
Progress Telerik