How to keep previous filter values with custom filtering in Kendo Grid?

Question

I have created custom filtering, because there is a column in which (1) a certain property of an array of objects is displayed and (2) either one of two types of objects can be displayed in each row of the column: declarants or declarantMeetings .

The following code works for filtering. The problem is that if the user has filtered the grid by some other column, then this filter is not added to the previous filters - all the previous filters are deleted. So it becomes impossible to filter by multiple columns.

How can I keep the old filters?

var getGridOptions = function (dataSource) {
    return {
        dataSource: dataSource,
        //...
        filter: function (e) {
            var field = e.filter.filters[0].field;

            //if the user is filtering the column with multiple possible object arrays
            if (field == "declarants") {
                e.preventDefault();

                var filters = [];
                var filterValue = e.filter.filters[0].value.toLowerCase();

                var _personFilter = {
                    operator: function (item, filterValue) {
                        var properties = ["firstName", "lastName", "otherNames", "position", "email", "fullNameAndDivision"];
                        if (typeof item !== "undefined") {
                            for (var k = 0; k < item.length; k++) {
                                for (var i = 0; i < properties.length; i++) {
                                    if (typeof item[k][properties[i]] !== "undefined") {
                                        var value = item[k][properties[i]].toLowerCase();
                                        if (value.indexOf(filterValue) !== -1) {
                                            return true;
                                        }
                                    }
                                }
                            }
                        }
                    },
                    value: filterValue,
                    field: field
                };
            
                var subfilters = [];
                subfilters.push({
                    operator: function (item, filterValue) {
                        if (typeof item !== "undefined") {
                            for (var k = 0; k < item.length; k++) {
                                if (typeof item[k]["meetingType"]["name"] !== "undefined") {
                                    var value = item[k]["meetingType"]["name"].toLowerCase();
                                    if (value.indexOf(filterValue) !== -1) {
                                        return true;
                                    }
                                }
                            }
                        }
                    },
                    value: filterValue,
                    field: "declarantMeetings"
                });
                subfilters.push(_personFilter);
                filters.push({logic: "or", filters:subfilters})

                e.sender.dataSource.filter({
                    logic: "and",
                    filters: filters
                });
            }
        }
    }
}

Answer 1

You can get all existing filters using the dataSource.filter method. Thus, you could extend the existing filter query with your custom filters as follows:

function removeFiltersForField(expression, field) {
    if (expression.filters) {
        expression.filters = $.grep(expression.filters, function(filter) {
            removeFiltersForField(filter, field);
            if (filter.filters) {
                return filter.filters.length;
            } else {
                return filter.field != field;
            }
        });
    }
}

var getGridOptions = function (dataSource) {
    return {
        dataSource: dataSource,
        //...
        filter: function (e) {
            var field = e.filter.filters[0].field;

            //if the user is filtering the column with multiple possible object arrays
            if (field == "declarants") {
                e.preventDefault();

                var filters = e.sender.dataSource.filter() || { filters:[], logic: "and" };
                var filterValue = e.filter.filters[0].value.toLowerCase();

                removeFiltersForField(field, filters);

                var _personFilter = {
                    operator: function (item, filterValue) {
                        var properties = ["firstName", "lastName", "otherNames", "position", "email", "fullNameAndDivision"];
                        if (typeof item !== "undefined") {
                            for (var k = 0; k < item.length; k++) {
                                for (var i = 0; i < properties.length; i++) {
                                    if (typeof item[k][properties[i]] !== "undefined") {
                                        var value = item[k][properties[i]].toLowerCase();
                                        if (value.indexOf(filterValue) !== -1) {
                                            return true;
                                        }
                                    }
                                }
                            }
                        }
                    },
                    value: filterValue,
                    field: field
                };
            
                var subfilters = [];
                subfilters.push({
                    operator: function (item, filterValue) {
                        if (typeof item !== "undefined") {
                            for (var k = 0; k < item.length; k++) {
                                if (typeof item[k]["meetingType"]["name"] !== "undefined") {
                                    var value = item[k]["meetingType"]["name"].toLowerCase();
                                    if (value.indexOf(filterValue) !== -1) {
                                        return true;
                                    }
                                }
                            }
                        }
                    },
                    value: filterValue,
                    field: "declarantMeetings"
                });
                subfilters.push(_personFilter);
                filters.filters.push({logic: "or", filters:subfilters});

                e.sender.dataSource.filter(filters);
            }
        }
    }
}