Kendo grid show & hide rows

Hide and show rows on checkbox changes, based on a column content

by fediz

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<div id="people_grid"></div>


<script type="text/x-kendo-template" id="owner_tpl">
  <div class="toolbar">

    <label class="list-label" for="list">Show only owners:</label>
    <input type="checkbox" id="owner_list" style="width: 75px" />
  </div>
</script>

CSS

#grid table td,
div {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.customer-name {
  display: inline-block;
  vertical-align: middle;
  line-height: 24px;
  padding-left: 3px;
}

.k-grid-toolbar {
  background-color: #3f51b5;
  color: #fff;
}

thead {
  background-color: #999;
  color: #3f51b5;
}

JavaScript

$("#people_grid").kendoGrid({
    toolbar: kendo.template($("#owner_tpl").html()),
    dataSource: {
      type: "odata",
      transport: {
        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
      },
      pageSize: 100
    },
    height: 400,
    columns: [{
      template: "<div ID='#: CustomerID #'style='display:none;'></div>" +
        "<div class='customer-name'>#: ContactName #</div>",
      field: "ContactName",
      title: "Contact",
      width: 150
    }, {
      field: "ContactTitle",
      title: "Title"
    }, {
      field: "CompanyName",
      title: "Company"
    }, {
      field: "Country",
      width: 150
    }]
  });


  /*   When the checkbox "Show only owners" change, filter rows   */

  $('#owner_list').on('change', function(e) {

    var grid = $("#people_grid").data("kendoGrid");
    var gridData = grid.dataSource.view();
    console.log(gridData)
    for (var i = 0; i < gridData.length; i++) {
      var currentperson = gridData[i].CustomerID;
      var ct = gridData[i].ContactTitle;

      if (ct != "Owner") {
        var row = grid.table.find("[ID='" + currentperson + "']").closest('tr');

        if (e.target.checked) {
          row.hide()
        } else {
          row.show()
        }
      }
    }
  })