title: Kendo-Knockout: How to filter and sort a remote data source?
body: <p>I am trying to get <code>KendoGrid</code> and <code>Knockout JS</code> working together. So far, so good.. except that I don't know how to get filtering and sorting working with a remote data source (I don't want to load all of the data on the client side before being able to sort and filter it.). Here's what I have so far:</p>
  
  <p><strong>MARKUP</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div id="Grid" data-bind="kendoGrid: Records"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var PageVM = function (model) {
      model = model || {};
      var self = this;
      self.Id = ko.observable(model.Id || 0);
      self.Title = ko.observable(model.Title || '');
      self.Slug = ko.observable(model.Slug || '');
      self.MetaKeywords = ko.observable(model.MetaKeywords || '');
      self.MetaDescription = ko.observable(model.MetaDescription || '');
      self.IsEnabled = ko.observable(model.IsEnabled || false);
      self.BodyContent = ko.observable(model.BodyContent || '');
      self.CssClass = ko.observable(model.CssClass || '');
      self.CultureCode = ko.observable(model.CultureCode || '');
  }
  
  var ViewModel = function () {
      var self = this;
      self.Records = ko.observableArray([]);
  
      self.Refresh = function () {
          OData.read({
              requestUri: "/odata/cms/Pages"
          },
          function (data, response) {
              viewModel.Records([]);
              $.each(data.results, function () {
                  var pageVM = new PageVM(this);
                  viewModel.Records.push(pageVM);
              });
          },
          function (e) {
              alert(e.message);
          });
      };
  
      self.Edit = function () {
          alert("test");
      };
  
      ko.bindingHandlers.kendoGrid.options = {
          pageable: {
              refresh: true
          },
          scrollable: false,
          columns: [{
              field: "Title",
              title: "Title"
          }, {
              field: "Slug",
              title: "Slug"
          },{
              field: "IsEnabled",
              title: "IsEnabled"
          },{
              field: "Id",
              title: " ",
              template: '&lt;a onclick="edit()" class="btn btn-default btn-sm"&gt;Edit&lt;/a&gt; &lt;a href="Delete/#=Id#" class="btn btn-danger btn-sm"&gt;Delete&lt;/a&gt;'
          }]
      };
  };
  
  var viewModel;
  
  $(document).ready(function () {
      viewModel = new ViewModel();
      viewModel.Refresh();
      ko.applyBindings(viewModel);
  });
  
  function edit() {
      alert("test");
  }
  </code></pre>
  
  <p>As you can see, I am using OData. As for the <code>kendoGrid</code> knockout binding, that's coming from here:
  <a href="http://rniemeyer.github.io/knockout-kendo/web/Grid.html" rel="nofollow">http://rniemeyer.github.io/knockout-kendo/web/Grid.html</a></p>
  
  <p>I guess what I need to do is probably get the filters and sorts from the KendoGrid itself first and then manually append that to an odata query string. I would also manually have to tell Kendo the total number of pages so it knows how many page numbers to display in the grid.</p>
  
  <p>So, I think I know what needs to be done, but I don't know where to start (how do I get/set such data with the KendoGrid, for example?). </p>