KendoUI Grid server pagination

Question

I am using KendoUI Grid to display my data in a KnockoutJS MVVM enabled application. Since MVVM is the architecture for client side, I am maintaining a knockoutjs observerble array and loading data to that 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');
            }
        }
    });
};

This works fine. But I want to implement pagination for my grid. I can do it 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 HTML file (I have used the Knockout-Kendo.js).

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

But what I want is to enable server pagination. Which means I want the data to be again loaded (lets say data of page 2) to my knockoutjs observable array when I go to next page (when I go to page 2). How can I do that?

Thank you in advance.

Answer 1

Instead of binding your kendoGrid to items, you'll need to bind it to a kendo.data.DataSource and specify a transport.

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

For example:

Add parameters for paging and "success" to your load method. This will come directly from the read method on the DataSource.

Option: You can call the success method with either the observable array or its contents. I experienced anomalies with inline editing when I used the observable array, and I found the grid to be more stable by using the contents of the observable array.

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

Create your data source as essentially a wrapper around your read.

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

Bind to your data source.

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

After that, if you need to programatically change the page, you can invoke the page method on the dataSource:

self.gridDataSource.page(4);