Remove a specific filter in a Kendo Grid with toolbar template

Question

I have a Telerik Kendo Grid with a toolbar template for create personalized filters.

I have 2 dropdownlist in my toolbar and the value selection must work in "And" with all filters (including the default filter of the grid).

When i want remove a filter i use this function:

CODE

<script type="text/javascript">
 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;
}
</script>

My problem is that my function removeFilter remove all the filters in my gridview when instead I would remove only the specific field.

I reproduce an Example in jsfiddle.

QUESTION

What's the correct method for delete only a specific field from the filters of the grid?

REFERENCES

1. GRID / Toolbar template

Answer 1

Your mistake is in myFilterChange function. You add filter on change but never remove the previous one. In the result of this you have condition like idcat == 1 && idcat == 2 after second change of this combo box.

You should clean filter before add another for the same column fiddle:

if (statoFilterValue) {
    removeFilter(currFilters.filters, "idstate");
    currFilters.filters.push({ field: "idstate", operator: "eq", value: parseInt(statoFilterValue) });
} else {
    removeFilter(currFilters.filters, "idstate");
}

Also in removeFilter function you shouldn't use recursion in combination with splice. It is enough to asigne the result of splice

if (filter[x].filters.length == 0) {
   console.log('empty');
   filter = filter.splice(x, 1);
}