KendoBasicFilter Example

by Luis Valle

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.bootstrap.min.css">
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.18.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/underscorejs/1.8.3/underscore-min.js"></script>
<link rel="stylesheet" href="https://cdn.statically.io/bb/luis_valle/kendobasicfilter/07e15ea5fa7454ba9063b804e8be72d1621f5b41/kendoBasicFilter.css">
<script src="https://cdn.statically.io/bb/luis_valle/kendobasicfilter/07e15ea5fa7454ba9063b804e8be72d1621f5b41/kendo.basicfilter.js"></script>
<script src="https://cdn.statically.io/bb/luis_valle/kendobasicfilter/07e15ea5fa7454ba9063b804e8be72d1621f5b41/sampleData.js"></script>
<div style="padding:20px;">
  <input id="txtMasterSearch" type="text" placeholder="Master Search" autocomplete="off" />
  <button id="btnMasterSearch">Search</button>
</div>
<div>
  <div id="tblResults"></div>
</div>

CSS

html,
docoment {
  font-family: Arial;
  font-size: 9pt;
}

#tblResults {
  display: inline-block;
}
#tblResults th.kendo-basicfilter-filter-options {
  padding: 10px;
}
.lnk-kendobasicfilter-current-col-data {
  color: gray;
}

JavaScript

// cdn's created at https://raw.githack.com/

(function() {
	$("#btnMasterSearch").on("click", function () {
  	$("#tblResults").data("kendoBasicFilter").filterBoxOptions.triggerFilter($("#tblResults")[0]);
    	return false;
   });

    $("#txtMasterSearch").on("keyup", function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);

        if (code == 13) { // enter key
            e.preventDefault();

            	$("#tblResults").data("kendoBasicFilter").filterBoxOptions.triggerFilter($("#tblResults")[0]);
            return false;
        }
    });

  var originalData = getData();

  $("#tblResults").data("responseData", originalData);
  $("#tblResults").kendoGrid({
    columns: [{
        field: "SaleDate", //SaleDate
        title: "SALE DATE",
        template: function(data) {
          return moment(data.SaleDate).format('M/D/YYYY');
        }
      },
      {
        field: "SerialNumber",
        title: "SERIAL NUMBER"
      },
      {
        field: "Model",
        title: "MODEL"
      },
      {
        field: "Year",
        title: "YEAR",
        template: function(data) {
          return (!isNull(data.Year) ? data.Year.toString() : "");
        }
      },
      {
        field: "Hours",
        title: "HOURS",
        attributes: {
          "style": "text-align:right;"
        },
        headerAttributes: {
          "style": "text-align:right;"
        },
        template: function(data) {
          return (!isNull(data.Hours) ? asNumber(data.Hours) : "");
        }
      },
      {
        field: "Channel",
        title: "CHANNEL"
      },
      {
        field: "Price",
        title: "PRICE",
        attributes: {
          "style": "text-align:right;"
        },
        headerAttributes: {
          "style": "text-align:right;"
        },
        template: function(data) {
          return (!isNull(data.Price) ? "$" + asNumber(noCents(data.Price)) : "");
        }
      },
      {
        field: "Location",
        title:...