General Filter for Kendo UI Grid

Individual filters are available each column in the Grid widget in Kendo UI for jQuery. However, some folks want a "general query" at the top of the Grid that filters against everything. Here's how to do it.

by jbristowe

HTML

<script src="//kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2017.2.621/styles/kendo.bootstrap-v4.min.css">
<div id="grid"></div>
<script id="template" type="text/x-kendo-template">
	<input type="search" id="searchQuery" />
</script>

CSS

html, input {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

JavaScript

var url = "http://demos.kendoui.com/service/Northwind.svc/Products";

$("#grid").kendoGrid({
  columns : [
    { field: "ProductID", width: 100 },
    { field: "ProductName", title: "Product Name" },
    { field: "UnitPrice", title: "Unit Price", width: 100 },
    { field: "QuantityPerUnit", title: "Quantity Per Unit" }
  ],
  dataSource: {
		schema: {
    	model: {
      	// treat all fields as strings in order to apply a
        // 'contains' filter against them (in the DataSource)
      	fields: {
        	ProductID: { type: "string" },
          ProductName: { type: "string" },
          UnitPrice: { type: "string" },
          QuantityPerUnit: { type: "string" }
        }
      }
    },
		pageSize : 7,
    transport : { read: url },
    type : "odata"
  },
  pageable : true,
  sortable : true,
  toolbar: [{ template: kendo.template($("#template").html()) }]
});

$("#searchQuery").keyup(function () {
  var query = $('#searchQuery').val();
  var grid = $("#grid").data("kendoGrid");
  if (query) {
    var filter = {
    	logic: "or",
      filters: [
      	{ field: "ProductID", operator: "contains", value: query },
      	{ field: "ProductName", operator: "contains", value: query },
      	{ field: "UnitPrice", operator: "contains", value: query },
      	{ field: "QuantityPerUnit", operator: "contains", value: query }
      ]
    };
    grid.dataSource.filter(filter);
  } else {
  	// clear the filter if the query is empty
  	grid.dataSource.filter([]);
  }
});