Multiple levels of filters in Kendo UI Grid

Question

We have a page that uses a Kendo Grid to display data that is fetched from a URL using JSON.

Our page has two ways of filtering the data - a "search" field (for simple, quick filtering) and column filters (the out-of-the-box Kendo solution) for advanced users.

The problem is that these two filtering methods can interfere with each other:

The user types "Bob" into the search filter (this adds a filter on several columns, including "Name"), something like: (name CONTAINS "Bob") or (company CONTAINS "Bob") or (email CONTAINS "Bob")
The user adds a "starts with" filter on the "Name" column - they suddenly get no results because the Kendo column filter changes our search filter to this: (name STARTSWITH "Bob") and ((company CONTAINS "Bob") or (email CONTAINS "Bob"))

This now returns no results because neither company or email contain "Bob".

Ideally what we want to do is to have two levels of filtering - a first level provided by the "search" field, and a second level provided by the column filters. I've tried having two data sources (one created from another), but so far I've not quite been able to make it work. Does anyone have any ideas?

thmshd thmshd · Accepted Answer · 2015-07-10T11:05:59

This might be not what you might want as solution, but we solved basically the same issue using a different approach: We strictly separate both terms of "searching" and "filtering". The grid is always able to filter (column filters) the "search results", but the search doesn't use the built-in grid filtering functionality directly to search, but use the getAdditionalData method to pass in our search Keyword.

In the backend, we search first, then apply the request filter.

Because we're using ASP.NET MVC for that, the action looks very similar to that:

public ActionResult Search([DataSourceRequest]DataSourceRequest request, 
                            string keyword)
{
    return Json(_ourDataRepository.Search(keyword)
        .ToDataSourceResult(request));
}

Here is a description how that basically works in ASP.NET MVC.

Multiple levels of filters in Kendo UI Grid

1 Answers