Nested Filtering with Kendo UI

Question

So I have two grids that contain a bunch of data, and each row of the grid has a checkbox for you to make selections in. Basically, what's happening is, when you make a selection on the first grid, it filters the second grid to show only the things that pertain to the selections on Grid 1. That's fully functional. But then, all of these grids also have a search bar at the top for you to search the grids for items that contain a term that you type in. This also filters the grid based on the user input.

I want to make these work in conjunction with one another, by nesting the filters with each other. I want the grid to be filtered based on the selections, and then I want a user to have the ability to type something in the search bar and filter the already filtered grid again for matching items.

I found a post on the Telerik forums that told someone to try something like this, but it doesn't work:

dataSource.filter({
    logic: 'or',
    filters: [
        { field: "Id", operator: "eq", value: 33 },
        {
            logic: "and",
            filters: [{ field: "Everything", operator: "contains", value: "s" }]
        },
        { field: "Id", operator: "eq", value: 34 },
        {
            logic: "and",
            filters: [{ field: "Everything", operator: "contains", value: "s" }]
        }
    ]
});

What I intend for this to do is filter a grid for items that have either (Id = 33 && Everything.contains("s")) || (Id = 34 && Everything.contains("s"). How can I fix this to make it work?

user_1267304 · Answer

I believe the filter structure you need is:

dataSource.filter({
    logic: 'or',
    filters: [
        {
            logic: "and",
            filters: [
                { field: "Everything", operator: "contains", value: "s" },
                { field: "Id", operator: "eq", value: 33 }
            ]
        },
        {
            logic: "and",
            filters: [
                { field: "Everything", operator: "contains", value: "s" },
                { field: "Id", operator: "eq", value: 34 }
            ]
        }
    ]
});

Try applying that strutucture manually to your grid, if it works you can implement it.

Nested Filtering with Kendo UI

1 Answers