title: How to perform server side filtering on Kendo UI Grid
body: <p>I am trying to implement server side filtering for a Kendo UI grid (client only). I am not sure how to pass the filter operator and value entered on the filter box. I was able to implement server paging and want the filtering to work alongside the server paging, i.e. show page 2 of 5 items of filtered rows. I saw some example of binding the request to "DataSourceRequest" object but we do not have licence for the server side Kendo UI and have to achieve it using the client side changes only.</p>
  
  <p>Here is my jQuery code:</p>
  
  <pre><code>var page = 1;
  var pageSize = 5;
  var title = "test";
  
  var selectWork = function (e) {
      alert("selected");
  };
  
  $("#selectWorkGrid").empty();
  $("#selectWorkGrid").kendoGrid({
      dataSource:
      {
          transport: {
              read: {
                  url: "http://example.com/" + "work/SearchWorkJ?worktitle=" + title,
                  dataType: "json",
                  contentType: "application/json",
                  data: {
                      page: page,
                      pageSize: pageSize
                  }
              },
              serverFiltering: true,                    
              parameterMap: function (data, type) {
                  if (type == "read") {
                      return {
                          page: data.page,
                          pageSize: data.pageSize
                      }
                  }
              }
          },
          schema: {
              model: {
                  id: "workId",
                  fields: {
                      workId: { type: "number" },
                      workTitle: { type: "string" },
                      writers: { type: "string" },
                      durationInMmSs: { type: "string" }
                  }
              },
              data: "data",
              total: "total"
          },
          pageSize: pageSize,
          serverPaging: true,
          serverFiltering: true
      },
      sortable: true,
      resizable: true,
      columnMenu: false,
      filterable: {
          mode: "row",
          extra: false,
          operators: {
              string: {
                  startswith: "Starts with",
                  eq: "Is equal to",
                  neq: "Is not equal to"
              }
          }
      },
      noRecords: {
          template: "No results available."
      },
      pageable: {
          numeric: false,
          refresh: true,
          buttonCount: 15
      },
      scrollable: false,
      columns: [
          {
              field: "workTitle",
              title: "Title",
              template: "#=workTitle#"
          },
          {
              field: "writers",
              title: "Writers",
              filterable: false,
              template: "${writers == null ? '':writers}",
              width: 300
          },
          {
              field: "durationInMmSs",
              title: "Duration",
              filterable: false,
              headerAttributes: { style: "text-align:right;" },
              attributes: { style: "text-align:right;" },
              width: 80
          },
          { command: { text: "Select", click: selectWork }, title: "", width: 60 }
      ]
  });
  </code></pre>
  
  <p>Controller action returning json:</p>
  
  <pre><code>public ContentResult SearchWorkJ(string workTitle, int page = 0, int pageSize = 0)
  {
      var worksJson = "";
      var works = WorkService.SearchWork(workTitle, page, pageSize);
      if (works != null)
      {
          // Set total to upto current record + 1 so that next button works in kendo
          int totalCount = page * pageSize + 1;
          var sortedWorks = new List&lt;WorkViewModel&gt;();
          sortedWorks.AddRange(works.Select(w =&gt; new WorkViewModel
          {
              WorkId = w.WorkId,
              WorkTitle = w.WorkTitle,
              Writers = w.Writers,
              DurationInMmSs = w.Duration
          }).OrderBy(w =&gt; w.WorkTitle));
          worksJson = JsonConvert.SerializeObject(new { total = totalCount, data = sortedWorks });
      }
      return new ContentResult { Content = worksJson, ContentType = "application/json" };
  }
  </code></pre>