KendoUI Grid服务器分页

Question

我正在使用KendoUI Grid在启用KnockoutJS MVVM的应用程序中显示我的数据.由于MVVM是客户端的体系结构,因此我维护一个knockoutjs可观察的数组并从服务器向该数组加载数据.

self.loadForGrid = function() {
    $.ajax({
        url: "api/matchingservicewebapi/GetAllMatchItemForClient/1",
        type: 'GET',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            console.log(data);
            $.each(data, function (i, obj) {
                self.users.push(self.items.push({ BirthDate: obj.BDate, Ref: obj.Ref, Amount: obj.Amount, Account: obj.Account, MatchItem_Id: obj.MatchItem_Id }));

            });
            window.alert('User(s) loaded successfully');
        },
        statusCode: {
            401: function (jqXHR, textStatus, errorThrown) {
                alert('Error loading users2');
            }
        }
    });
};

这很好用.但我想为我的网格实现分页.我可以像这样做客户端.这是我的viewmodel代码.

self.items = ko.observableArray([]);

ko.bindingHandlers.kendoGrid.options = {
    groupable: true,
    scrollable: true,
    sortable: true,
    pageable: {
        pageSizes: [5, 10, 15]
    }
};

这是我在HTML文件中的绑定(我使用过Knockout-Kendo.js).

<div data-bind="kendoGrid: items"> </div>

但我想要的是启用服务器分页.这意味着当我转到下一页(当我转到第2页)时,我希望将数据再次加载(让我们说第2页的数据)到我的knockoutjs可观察数组.我怎样才能做到这一点？

先感谢您.

Answer 1

您不需要将 kendoGrid 绑定到项目，而是需要将其绑定到 kendo.data.DataSource 并指定传输。

参考： http: //docs.telerik.com/kendo-ui/api/javascript/data/datasource

例如：

将分页和“成功”参数添加到您的加载方法中。这将直接来自数据源上的读取方法。

选项：您可以使用可观察数组或其内容调用 success 方法。当我使用 observable 数组时，我经历了内联编辑的异常，并且我发现使用 observable 数组的内容使网格更加稳定。

self.loadForGrid = function(pageIndex, success) {
    /* Consider adding an argument for page size to the api call. */
    $.ajax({
        url: "api/matchingservicewebapi/GetAllMatchItemForClient/" + pageIndex,
        type: 'GET',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            console.log(data);
            $.each(data, function (i, obj) {
                self.users.push(self.items.push({ BirthDate: obj.BDate, Ref: obj.Ref, Amount: obj.Amount, Account: obj.Account, MatchItem_Id: obj.MatchItem_Id }));

            });

            /* Invoke the dataSource.read success method. */
            success(self.items());

            window.alert('User(s) loaded successfully');
        },
        statusCode: {
            401: function (jqXHR, textStatus, errorThrown) {
                alert('Error loading users2');
            }
        }
    });
};

创建您的数据源本质上作为您的读取的包装器。

self.gridDataSource = new kendo.data.DataSource({
    transport: {
        read: function(options) { self.loadForGrid(options.data.page, options.success); }
    },
    pageSize: 20,  // options.data.pageSize
    page: 1, // options.data.page
    serverPaging: true
});

绑定到您的数据源。

<div data-bind="kendoGrid: gridDataSource"> </div>

之后，如果需要以编程方式更改页面，可以调用数据源上的 page 方法：

self.gridDataSource.page(4);