title: Kendo Grid Custom Client side filtering
body: <p>I am facing issue while doing client side filtering on Kendo Grid.
  I am using ASP.NET MVC 4.5. I want to do filtering on client side(to reduce the server trip) and filtering will happen on the grid data only.</p>
  
  <p>Please suggest, how can we get the data filter based on search value entered in text box and click of button.</p>
  
  <p>Below is source code which I am using for sample demo.</p>
  
  <pre><code>@using Kendo.Mvc.UI
  @model IEnumerable&lt;DemoApp.Controllers.StudentsGrid&gt;
  &lt;link rel="stylesheet" href="~/Scripts/Kendo/Css/kendo.common.css" /&gt;
  &lt;link rel="stylesheet" href="~/Scripts/Kendo/Css/kendo.default.min.css" /&gt;
  &lt;input type="button" value="Search" id="btnSearch" /&gt;
  FirstName
  &lt;input id="txtFirstName" /&gt;
  LastName
  &lt;input id="txtLastName" /&gt;
  @(
  Html.Kendo().Grid&lt;DemoApp.Controllers.StudentsGrid&gt;(Model).Name("Grid")
  .Columns(columns =&gt;
    {
        columns.Bound(p =&gt; p.FirstName);
        columns.Bound(p =&gt; p.LastName);
    })
    .Filterable()
    .DataSource(ds =&gt; ds
      .Ajax()
      .ServerOperation(false)
      )
  )
  &lt;script src="~/Scripts/Kendo/kendo.all.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/Kendo/kendo.aspnetmvc.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
    $(function () {
      //set culture of the Kendo UI
      kendo.culture("en_GB");
  
  
      $("#btnSearch").click(function () {
  
        grid = $("#grid").data("kendoGrid");
        var ds = grid.dataSource;
        ds.filter([
  
            {
                "field": "FirstName",
                "operator": "startswith",
                "value": $("#firstName").val()
            }
        ]);
  
  
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>I always get "null" value from below code</p>
  
  <pre><code>    grid = $("#grid").data("kendoGrid");
        var ds = grid.dataSource;
  </code></pre>
  
  <p>Regards</p>