Remove Filters from data source

[Greg Lavelle]

Is it possible to remove a specified filter from he datasource in javascript.  I would like to dynamically add/remove a filter after checking/unchecking a checkbox.

for example:

var filters = datasource.filter();
for(i=0;i<filters.length;i++){
    ...
    [conditional code here]
    ....
    filters[i].splice(i,1);
}

[Eric]

I am looking to do the exact same thing.  Did you find a solution?

[Eric]

I found a solution.  You have to modify the filter object to remove your filter, then set the filter to the modified filter object:

        var datasource = $("#Grid").data("kendoGrid").dataSource;
        var filters = datasource.filter();

Clear filters:

                datasource.filter([]);

 Remove a filter:
                        filters.filters.splice(i, 1);
                        datasource.filter(filters);
Add a filter:
filters.filters.push({ field: "Filter", operator: "eq", value: 1 });

datasource.filter(filters);

When you get to the details, its harder than it looks to modify the filter object.

[James Hood]

thread necro..

But this helped me, although instead of building a filter array, I have a sort method on a datasource, which is being called from a function and a switch

to remove the filter (IE reset it back to initial view) all I did was datasource.filter({})

switch (style) {
    case 1:
        FoodMenuDataSource.filter({ field: "Level", operator: "eq", value: 1 });
        break;
    case 2:
        FoodMenuDataSource.filter({ field: "Level", operator: "eq", value: 2 });
        break;
    case 3:
        FoodMenuDataSource.filter({ field: "Level", operator: "eq", value: 3 });
        break;
    case 4:
        FoodMenuDataSource.filter({});
        break;
}

[Will]

@James Hood - Excellent!  Thanks for sharing this.

[Jeff]

I know this thread is rather old, but here is our solution which works quite well even for nested filters.

function removeFilter(filter, searchFor) {
    if (filter == null)
        return [];

    for (var x = 0; x < filter.length; x++) {

        if (filter[x].filters != null && filter[x].filters.length >= 0) {
            if (filter[x].filters.length == 0) {
                filter.splice(x, 1);
                return removeFilter(filter, searchFor);
            }
            filter[x].filters = removeFilter(filter[x].filters, searchFor);
        }
        else {
            if (filter[x].field == searchFor) {
                filter.splice(x, 1);
                return removeFilter(filter, searchFor);
            }
        }
    }

    return filter;
}

To use this you call it with the filters and field name (searchFor) you want to remove. 
Ex: 

filters = $('#divGrid').data('kendoGrid').dataSource.filter().filters;

//Remove our old filters
filters = removeFilter(filters, 'orgId');
filters = removeFilter(filters, 'cliID');

[Carey]

Function does not work on this filter configuration, when I attempt to remove all "status" related entries:

{
    "logic": "and",
    "filters": [
        {
            "filters": [
                {
                    "field": "name",
                    "operator": "contains",
                    "value": "JOHNSON"
                },
                {
                    "field": "city",
                    "operator": "contains",
                    "value": "MILWAUKEE"
                }
            ],
            "logic": "and"
        },
        {
            "logic": "or",
            "filters": [
                {
                    "field": "status",
                    "operator": "eq",
                    "value": "G"
                },
                {
                    "field": "status",
                    "operator": "eq",
                    "value": "H"
                },
                {
                    "field": "status",
                    "operator": "eq",
                    "value": "I"
                }
            ]
        }
    ]
}

[Graham]

Easy way to remove filter for specified column:

 

            var grid = $('#myGrid').data("kendoGrid");

 

            grid.dataSource.filter({
                field: "myColumn",
                operator: "neq",
                value: "zzz"
            });

 

As long as the column contains no "zzz" values, this does the trick more easily than other methods.

[Richard]

That's a little hard to follow, without any comments. Can you explain the if statement, inside the for loop, there?

[Richard]

Graham, that would work but it's hairy and ugly. And if you had a match in your data, you're screwed.

 

In my case, I need to remove the filter when I "hide" a desired column. I need to remove that column's filter dynamically. It wasn't too hard to figure out.

 

Here is how you would properly do it:

//in your grid column, set the headerTemplate with a css property for "X" mark/removal

        columns: [{
            field: "MyField",
            title: "Year",
            headerTemplate: "Year<span name='MyField' class='k-icon k-i-close remove' style='float: right;'></span>",
            width: "75px",
            filterable: {
                ui: yearsFilter
            }
        },

 

//Remove column button - click event

$(document).on("click", ".remove", function () {

 

    //hide the specified report grid column

    var grid = $('#myDiv').find('.k-grid').data("kendoGrid");

    grid.hideColumn($(this).attr("name"));

 

    //remove filters for the hidden column

    var filters = grid.dataSource.filter().filters;

    var columnName = $(this).attr("name");

 

    //determine which grid filter to remove

    var newFilters = []

    filters.forEach(function (e) {

        if (e.field != columnName) { //only use filters that aren't a match to our desired column

            newFilters.push(e);

        }

    });

 

    grid.dataSource.filter([]);

    grid.dataSource.filter(newFilters); //reset the grid's filters, with the match removed

 

});

[Stefan]

Hello, Richard,

Thank you for sharing the solution with the Kendo UI community.

Another approach that could be used is similar, but instead of adding all different fields, the column could be removed from the original array:

filters.forEach(function (e) {
  if (e.field == columnName) {
    var index = filters.indexOf(e)
    filters.splice(index,1)
  }
});

Regards,
Stefan
Progress Telerik

[Darron]

In trying to remove a specific filter (column "CountStatus") from a set, I found that doing a "filters.splice" within a for loop from 0 to filters.length is faulty as any splice shortens the filters.length and changes the index numbers so that you wind up skipping an entry after each splice.

Do the for loop from top to bottom instead.

i.e.; from filters.length -1 DOWN to zero so that splices don't change indexes of items not yet checked.

Like so...

        var ds = grid.dataSource;
        var filters = [];
        var curr_filters = ds.filter();
        if (curr_filters) {
            filters = curr_filters.filters;
        }
        for (var i = filters.length - 1; i >= 0; i--)
        {
            if(filters[i].field == "CountStatus")
            {
                filters.splice(i, 1);
            }
        }
        curr_filters = filters;

        ds.filter(curr_filters);

 

[Stefan]

Hello, Darron,

Thank you for sharing am improved approach.

We always appreciated when the community comes with an idea for resolving issues using better approaches.

I have added some Telerik points to your account for sharing this.

Regards,
Stefan
Progress Telerik