title: How to make a search bar in kendo grid?
body: <p>I want to make a search bar on coloumns of kendo grid so that on entering value it automatically searches in grid?
  Here is my HTML and javascript code?
      </p>
  
  <pre><code>    $(document).ready(function () {
          var selectedRow = null;
  
          dataSource = new kendo.data.DataSource({
              transport: {
                  batch: true,
  
                  read: function (options) {
                      $.ajax({
                          url: "/api/Companies/GetAllCompanies2",
                          type: "GET",
                          dataType: "json",
                          cache: false,
                          crossDomain: true,
                          processData: true,
                          contentType: "application/json; charset=utf-8",
                          async: true,
  
  
                          success: function (result) {
                              options.success(eval(result));
  
                          },
                          error: function (xhr, status, error) {
                              alert(error.responseTextss);
                          }
                      });
                  },
  
  
  
              },
              error: function (e) {
  
                  alert("Status: " + e.status + "; Error message: " + e.errorThrown);
              },
              batch: false,
              pageSize: 20,
  
              schema: {
                  model: {
                      fields: {
                          Id: { type: "int" },
                          CurrentCurrencyCode: { editable: true, type: "int" },
                          ShortName: { editable: true, type: "string" },
                          FullName: { editable: true, type: "string" },
                          ContactPerson: { editable: true, type: "string" },
                          Address1: { editable: true, type: "string" },
                          CompanyCity: { editable: true, type: "string" },
                          CompanyState: { editable: true, type: "string" },
                          CompanyCountry: { editable: true, type: "string" },
                          ZipPostCode: { editable: true, type: "string" },
                          TelArea: { editable: true, type: "string" }
  
                      }
                  }
              }
          });
  
  
  
          var grid = $("#grid").kendoGrid({
              change: function (e) {
                  selectedRow = this.select();
                  var item = this.dataItem(selectedRow);
                  kendo.bind($("#gridEditor"), item);
              },
              dataSource: dataSource,
              selectable: true,
  
              pageable: true,
              height: 500,
               filterable: {
                  mode: "row"
              },
              columns: [{ field: 'Id', width: '150px' },
                  {
                      field: 'CurrentCurrencyCode', width: '145px', filterable: {
                  cell: {  operator: "contains" }
              }},
       ],
          }).data("kendoGrid");
  
      });
  
  &lt;/script&gt;
  &lt;ul class="nav nav-pills nav-stacked"&gt;
  
  &lt;/ul&gt;
  &lt;div id="grid"
  
       style="  margin-left: 196px; width: 50%; "&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
  
      function updatedb() {
          var id = document.getElementById('id').value;
          var ccco = document.getElementById('ccco').value;
          var sn = document.getElementById('sn').value;
          var fn = document.getElementById('fn').value;
          var cp = document.getElementById('cp').value;
          var add = document.getElementById('add').value;
          var cci = document.getElementById('cci').value;
          var cs = document.getElementById('cs').value;
          var cco = document.getElementById('cco').value;
          var zpc = document.getElementById('zpc').value;
          var tl = document.getElementById('tl').value;
  
          $.ajax({
  
              url: "/api/Companies/SaveDefCompny",
  
              type: "POST",
              data: '{Id: "' + id + '",CurrentCurrencyCode: "' + ccco + '",  ShortName: "' + sn + '" , FullName: "' + fn + '", ContactPerson: "' + cp + '", Address1: "' + add + '",  CompanyCity: "' + cci + '",  CompanyState: "' + cs + '",CompanyCountry: "' + cco + '",ZipPostCode: "' + zpc + '",TelArea: "' + tl + '"}',
              dataType: "json",
              cache: false,
              crossDomain: true,
              processData: true,
              contentType: "application/json; charset=utf-8",
              async: true,
  
  
              success: function (result) {
                  options.success(eval(result));
  
              },
              error: function (xhr, status, error) {
                  alert(error.responseTextss);
              }
          });
  
  
  
      }
  
  
  &lt;/script&gt;
  
  &lt;form &gt;
      &lt;div id="gridEditor" style="margin-left: 956px; margin-top: -500px; "&gt;
  
          &lt;input id="ccco" type="text" name="ItemName" class="k-textbox" data-bind="value: CurrentCurrencyCode"&gt;&lt;br /&gt;
          &lt;input id="sn" type="text" name="ItemName" class="k-textbox" data-bind="value: ShortName"&gt;&lt;br /&gt;
          &lt;input id="fn" type="text" name="ItemName" class="k-textbox" data-bind="value: FullName"&gt;&lt;br /&gt;
          &lt;input id="cp" type="text" name="ItemName" class="k-textbox" data-bind="value: ContactPerson"&gt;&lt;br /&gt;
          &lt;input id="add" type="text" name="ItemName" class="k-textbox" data-bind="value: Address1"&gt;&lt;br /&gt;
          &lt;input id="cci" type="text" name="ItemName" class="k-textbox" data-bind="value: CompanyCity"&gt;&lt;br /&gt;
          &lt;input id="cs" type="text" name="ItemName" class="k-textbox" data-bind="value: CompanyState"&gt;&lt;br /&gt;
          &lt;input id="cco" type="text" name="ItemName" class="k-textbox" data-bind="value: CompanyCountry"&gt;&lt;br /&gt;
          &lt;input id="zpc" type="text" name="ItemName" class="k-textbox" data-bind="value: ZipPostCode"&gt;&lt;br /&gt;
          &lt;input id="tl" type="text" name="ItemName" class="k-textbox" data-bind="value: TelArea"&gt;&lt;br /&gt;&lt;br /&gt;
          &lt;input id="id" type="text" class="k-textbox" name="ItemName" data-bind="value: Id"&gt;&lt;br /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;span style="margin-left:10px"&gt;&lt;input id="save" class="k-button" onclick="updatedb()" type="button" value="update"&gt;&lt;/span&gt;&lt;br&gt;
      &lt;/div&gt;
  
  
  &lt;/form&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>can anyone tell me how to add search box on all coloumns and also how to setup a key change event?</p>