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

Question

我正在努力让KendoGrid 和Knockout JS 一起工作。到目前为止，一切都很好..除了我不知道如何使用远程数据源进行过滤和排序（我不想在能够排序和过滤之前在客户端加载所有数据.)。到目前为止，这是我所拥有的：

标记

<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

经过数小时的努力，我最终决定采用更简单的解决方案：直接使用 KendoGrid 和 OData 源，然后只使用 Knockout 来创建和编辑单个条目（它不会t 需要知道网格中的所有条目）。

这也需要一段时间才能弄清楚.. 以下链接是一个好的开始： 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>'
        }]
    });
});