Geek asks and answers

KendoUI grid pagination

I use the KendoUI grid to display my data in a KnockoutJS MVVM-enabled application. Since MVVM is an architecture for the client side, I maintain a knockoutjs observational array and load data into this array from the server.

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');
            }
        }
    });
};

It works great. But I want to implement pagination for my grid. I can do it on the client side like this. This is my viewmodel code.

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

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

And this is my binding in the HTML file (I used Knockout-Kendo.js ).

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

But I want to enable pagination. This means that I want the data to be loaded again (say, data on page 2) into the observed knockout array when I go to the next page (when I go to page 2). How can i do this?

Thanks in advance.

+5
1

kendoGrid kendo.data.DataSource .

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

:

"" . DataSource.

: , . , , , .

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>

, , :

self.gridDataSource.page(4);
+2

More articles:


All Articles