Kendo-Knockout：如何过滤和排序远程数据源？

Question

我试图让KendoGrid和Knockout JS一起工作。到目前为止，这么好，除了我不知道如何使用远程数据源进行过滤和排序（我不想在客户端加载所有数据，然后才能对其进行排序和过滤）。这是我到目前为止有：

MARKUP

<div class="row"> 
    <div id="Grid" data-bind="kendoGrid: Records"></div> 
</div> 

JS

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: '<a onclick="edit()" class="btn btn-default btn-sm">Edit</a> <a href="Delete/#=Id#" class="btn btn-danger btn-sm">Delete</a>' 
     }] 
    }; 
}; 

var viewModel; 

$(document).ready(function() { 
    viewModel = new ViewModel(); 
    viewModel.Refresh(); 
    ko.applyBindings(viewModel); 
}); 

function edit() { 
    alert("test"); 
} 

正如你所看到的，我使用的OData。至于kendoGrid淘汰赛结合，这就是从这里来的： http://rniemeyer.github.io/knockout-kendo/web/Grid.html

我想我需要做的是可能得到来自KendoGrid过滤器和排序本身，然后再手动附加是一个OData的查询字符串。我也会手动告诉Kendo页面的总数，以便知道要在网格中显示多少个页面号。因此，我想我知道需要做什么，但我不知道从哪里开始（例如，如何使用KendoGrid获取/设置这些数据？）。

Answer 1

经过几个小时努力，使这项工作，我最终决定一个简单的解决方案：直接与OData源使用KendoGrid，然后只用Knockout创建和编辑单条目（它并不需要知道在网格中的所有条目）。

这也花了一段时间，虽然弄清楚..下面的链接是一个好的开始： http://blogs.telerik.com/kendoui/posts/12-10-25/using_kendo_ui_with_mvc4_webapi_odata_and_ef

但是，它并没有给我所有我需要的答案。例如，我需要弄清楚ASP.NET Web API对于数据使用属性value，对于总记录数使用odata.count。这是我最后的实现（减去淘汰赛的东西）：

$(document).ready(function() { 
    $("#Grid").kendoGrid({ 
     data: null, 
     dataSource: { 
      type: "odata", 
      transport: { 
       read: { 
        url: "/odata/cms/Pages", 
        dataType: "json" 
       } 
      }, 
      schema: { 
       data: function (data) { 
        return data.value; 
       }, 
       total: function (data) { 
        return data["odata.count"]; 
       } 
      }, 
      pageSize: 10, 
      serverPaging: true, 
      serverFiltering: true, 
      serverSorting: true 
     }, 
     filterable: true, 
     sortable: true, 
     pageable: { 
      refresh: true 
     }, 
     scrollable: false, 
     columns: [{ 
      field: "Title", 
      title: "Title" 
     }, { 
      field: "Slug", 
      title: "Slug" 
     },{ 
      field: "IsEnabled", 
      title: "Is Enabled" 
     },{ 
      field: "Id", 
      title: " ", 
      template: '<a onclick="editRecord(#=Id#)" class="btn btn-default btn-sm">Edit</a> <a onclick="deleteRecord(#=Id#)" class="btn btn-danger btn-sm">Delete</a>' 
     }] 
    }); 
});