KendoUI Custom Grid Filter Operators

by Andrew Moore

HTML

<link rel="stylesheet" href="https://cdn.kendostatic.com/2016.1.412/styles/kendo.common.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.kendostatic.com/2016.1.412/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.kendostatic.com/2016.1.412/styles/kendo.blueopal.min.css">
<div id="grid">

</div>

CSS

html {
  font-family: Arial;
  font-size: 12px;
}

JavaScript

$(document).ready(function() {
  $("#grid").kendoGrid({
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/Products",
          dataType: "jsonp"
        }
      },
      pageSize: 20,
      serverFiltering: true,
    },
    height: 350,
    filterable: {
      operators: {
        string: {
          "Contains": "Contains",
          "DoesNotContain": "Does not contain",
          "Equals": "Is equal to",
          "DoesNotEqual": "Is not equal to",
          "StartsWith": "Starts with",
          "EndsWith": "Ends with"
        }
      }
    },
  });
});