Irish
Irish

Reputation: 1517

Apply multiple filters to Kendo Grid programmatically

My project has a Kendo Grid that has the usual table header filtering, but I've also been asked to provide custom filters for status types and years (multi-select). So I have a drop-down with a set of years to select from, and the user can select any of six year options. So here's the logic of the filter:

Years column: Show all rows whose year matches one of the year options. This filter uses "or" logic.

Status column: Show all rows whose status equals one of the selected options. Also "or" logic.

The filters must use "and" logic to combine the two filters.

function setStatusGridFilters() {
    var grid = $("#MyKendoGrid").data("kendoGrid");
    var dataSource = grid.dataSource;
    var filterCollection = { logic: "or", filters: [] };

    var displayStatuses = $("#StatusFilter").getKendoCheckBoxGroup().value();
    for (var i = 0; i < displayStatuses.length; i++) {
        filterCollection.filters.push({ field: "Status", operator: "eq", value: displayStatuses[i] });
    }

    dataSource.filter(filterCollection);
    dataSource.read();
}

function setYearGridFilters() {
    var grid = $("#myKendoGrid").data("kendoGrid");
    var dataSource = grid.dataSource;
    var filterCollection = { logic: "or", filters: [] };

    var years = $("#YearList").val();

    for (var i = 0; i < years.length; i++) {
        filterCollection.filters.push({ field: "Year", operator: "eq", value: years[i] });

    dataSource.filter(filterCollection);
    dataSource.read();
}

This just isn't working, and I'm not sure how to pull it off. Either of these custom filters works by itself, but I haven't found a way to make them work together. Each filter should be "or" with the selected options, but "and" between them.

Upvotes: 1

Views: 926

Answers (1)

Gopi Reddy
Gopi Reddy

Reputation: 11

dataSource.filter({
    logic: "or",
    filters: [
      { field: "fieldA", operator: "eq", value: 100 },
      {
         logic: "and",
         filters: [
             { field: "fieldA", operator: "lt", value: 100 },
             { field: "fieldB", operator: "eq", value: true }
         ]
     }
    ]
});

I think this will help you.

Upvotes: 1

Related Questions