Adding multiple filtering to a Kendo Grid via checkboxes

Question

I have a Kendo Grid for records that have four status types: "scheduled", "open", "on execution" and "closed".

I am trying to use the checkboxes as filters so I can show only the statuses I need. I know how to set one single filter, for example, list only the "scheduled" records, or the "closed" ones. But I want to show the "scheduled" and "open" records, for example, and I haven't figured out how. What I have right now works for a single status type.

Here's some code:

$('input[type="checkbox"]').on('change', function () {
    var grid = $("#grid").data("kendoGrid");
    var ck_scheduled = $('#ck_scheduled').prop('checked');
    var ck_open = $('#ck_open').prop('checked');
    var ck_onexecution = $('#ck_onExecution').prop('checked');
    var ck_closed = $('#ck_closed').prop('checked');
    var allFilters = [];

    if (ck_scheduled) {
        allFilters.push({ logic: "or", field: "Status", operator: "eq", value: "Scheduled" });
    }
    if (ck_open) {
        allFilters.push({ logic: "or", field: "Status", operator: "eq", value: "Open" });
    }
    if (ck_onexecution) {
        allFilters.push({ logic: "or", field: "Status", operator: "eq", value: "On execution" });
    }
    if (ck_closed) {
        allFilters.push({ logic: "or", field: "Status", operator: "eq", value: "Closed" });
    }
    grid.dataSource.filter(allFilters);
});

What I'm trying to do with this function here is: when one of the checkboxes change, it will check the 4 checkboxes state and add a filter (using the "or" logical operator) for the checked ones. In the end, apply all the filters.

But what is happening: it only applies one filter. For example, when I check the "closed" checkbox, it shows only "closed" records, ignoring the other checked checkboxes.

Answer 1

There is a mistake when setting the logic in the filters. logic is defined globally for all filter conditions. I.e. either set an and or an or of the filter conditions. Not for each condition.

The change event handler should look like:

$('input[type="checkbox"]').on('change', function () {
    var grid = $("#grid").data("kendoGrid");
    var ck_scheduled = $('#ck_scheduled').prop('checked');
    var ck_open = $('#ck_open').prop('checked');
    var ck_onexecution = $('#ck_onExecution').prop('checked');
    var ck_closed = $('#ck_closed').prop('checked');
    var allFilters = [];

    if (ck_scheduled) {
        allFilters.push({ field: "Status", operator: "eq", value: "Scheduled" });
    }
    if (ck_open) {
        allFilters.push({ field: "Status", operator: "eq", value: "Open" });
    }
    if (ck_onexecution) {
        allFilters.push({ field: "Status", operator: "eq", value: "On execution" });
    }
    if (ck_closed) {
        allFilters.push({ field: "Status", operator: "eq", value: "Closed" });
    }
    grid.dataSource.filter({ logic: "or", filters: allFilters});
});

var ds = [
  { Code: "c1", Date: "2014/01/01", Status: "scheduled" },
  { Code: "c2", Date: "2014/01/01", Status: "open" },
  { Code: "c3", Date: "2014/01/01", Status: "onexecution" },
  { Code: "c4", Date: "2014/01/01", Status: "closed" },
  { Code: "c5", Date: "2014/01/01", Status: "open" },
  { Code: "c6", Date: "2014/01/01", Status: "open" },
  { Code: "c7", Date: "2014/01/01", Status: "on execution" },
  { Code: "c8", Date: "2014/01/01", Status: "on execution" }
];

var grid = $("#grid").kendoGrid({
  dataSource: ds,
  columns   :
  [
    { field: "Code" },
    { field: "Date"}, 
    { field: "Status" }
  ]
}).data("kendoGrid");

$('input[type="checkbox"]').on('change', function () {
  var grid = $("#grid").data("kendoGrid");
  var ck_scheduled = $('#ck_scheduled').prop('checked');
  var ck_open = $('#ck_open').prop('checked');
  var ck_onexecution = $('#ck_onExecution').prop('checked');
  var ck_closed = $('#ck_closed').prop('checked');
  var allFilters = [];

  if (ck_scheduled) {
    allFilters.push({ field: "Status", operator: "eq", value: "Scheduled" });
  }
  if (ck_open) {
    allFilters.push({ field: "Status", operator: "eq", value: "Open" });
  }
  if (ck_onexecution) {
    allFilters.push({ field: "Status", operator: "eq", value: "On execution" });
  }
  if (ck_closed) {
    allFilters.push({ field: "Status", operator: "eq", value: "Closed" });
  }
  grid.dataSource.filter({ logic: "or", filters: allFilters});

});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>


<label>Scheduled: <input type="checkbox" id="ck_scheduled"/>&nbsp;&nbsp;&nbsp;</label>
<label>Open: <input type="checkbox" id="ck_open"/>&nbsp;&nbsp;&nbsp;</label>
<label>On Execution: <input type="checkbox" id="ck_onExecution"/>&nbsp;&nbsp;&nbsp;</label>
<label>Closed: <input type="checkbox" id="ck_closed"/>&nbsp;&nbsp;&nbsp;</label>
<div id="grid"></div>